中间的旋转木马

首先在首页组件中，导入旋转木马子组件，并使用子组件：

书写代码的逻辑：

- 布局：1个大盒子，定义数据(1个数组嵌套了6个对象)，在大盒子中遍历渲染6个小盒子

- 修饰样式：定义了3个动画，并将动画给小盒子做修饰

- 通过ref获取父标签，用父标签的children获取到所有的子标签循环给每个子标签设置动画的延迟

- 给每个子标签绑定鼠标移入事件

  // 事件函数
  const onmouseenter = (id) => {
      // 让动画停止
      for (let a = 0; a < carouselBox.current.children.length; a++) {
          carouselBox.current.children[a].style['animation-play-state'] = `paused`
      }
      // 让当前这个变 hov 图片 ==> 知道这是哪一个要变
      // console.log(222, id);
      // 根据id找到对应的这个数据
      let carouselData = data.find(item => item.id === id)
      // 修改这个数据的active
      carouselData.active = !carouselData.active
      // 重新设置data数据
      setData([...data])
      // console.log(333, data);
  }

- 模拟移入事件设置移出事件和点击事件

  const onmouseleave = (id) => {
      // 让动画停止
      for (let a = 0; a < carouselBox.current.children.length; a++) {
          carouselBox.current.children[a].style['animation-play-state'] = `running`
      }
      // 让当前这个变 hov 图片 ==> 知道这是哪一个要变
      // console.log(222, id);
      // 根据id找到对应的这个数据
      let carouselData = data.find(item => item.id === id)
      // 修改这个数据的active
      carouselData.active = !carouselData.active
      // 重新设置data数据
      setData([...data])
      // console.log(333, data);
  }
  const onclick = (id) => {
      let carouselData = data.find(item => item.id === id)
      alert(carouselData.text)
  }

setData如果修改数据的时候，只是修改了深层次的数据，页面是不会渲染的，因为没有监听到深层次的数据变化，所以为了能重新渲染页面，修改数据的时候，需要将数据外层的内存地址也做修改。