React 30 秒速学：制做轮播组件

时间 2019-11-21

标签 react 制做组件栏目 React 繁體版

原文原文链接

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，全部案例进行分析、注释、上线。react

系列文章：git

轮播组件

使用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> ]} /> ); } 复制代码