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> ]} /> ); } 複製代碼

相關標籤/搜索