React 实现 Carousel 轮播组件（30-seconds-of-react）

对原作 30-seconds-of-react 项目的中文化与学习，并对案例进行分析、运行和注释。 中文项目地址： 30-seconds-of-react-zh_CN-with-demo 。

轮播组件。

• 使用 React.setState() hook 来创建 active 状态变量，并给它一个值'0'（第一项的索引）。
• 使用 style 对象来保存各个组件的样式。
• 使用 React.setEffect() hook 使用 setTimeout 将 active 的值更新为下一个项的索引。
• 构造 props ，计算是否应将可见性样式设置为“可见”或不对每个轮播项目进行映射，并相应地将组合样式应用于轮播项目组件。
• 使用 React.cloneElement() 渲染轮播项目，并将其余的 props 与计算出的样式一起传递下来。

function Carousel(props) {
  // active 当前轮播激活的索引
  const [active, setActive] = React.useState(0);
  const style = {
    carousel: {
      position: "relative"
    },
    carouselItem: {
      position: "absolute",
      visibility: "hidden"
    },
    visible: {
      visibility: "visible"
    }
  };
  React.useEffect(() => {
    // 将 active 的值更新为下一个项的索引
    setTimeout(() => {
      const { carouselItems } = props;
      // 因为 active 在 render 中使用了， active 改变会影响视图而重新渲染，所以也会再次触发 useEffect
      setActive((active + 1) % carouselItems.length);
    }, 1000);
  });
  const { carouselItems, ...rest } = props;
  return (
    <div style={style.carousel}>
      {carouselItems.map((item, index) => {
        // 激活就显示，否则隐藏
        const activeStyle = active === index ? style.visible : {};
        // 克隆出一个组件来渲染
        return React.cloneElement(item, {
          ...rest,
          style: {
            ...style.carouselItem,
            ...activeStyle
          },
          key: index
        });
      })}
    </div>
  );
}
复制代码

export default function() {
  return (
    <Carousel
      carouselItems={[
        <div>carousel item 1</div>,
        <div>carousel item 2</div>,
        <div>carousel item 3</div>
      ]}
    />
  );
}
复制代码