为组件反应轮播类型答案

【问题标题】：react Carousel Type for components为组件反应轮播类型
【发布时间】：2022-01-09 12:04:55
【问题描述】：

我想在 react 中制作一个组件，它可以像轮播一样呈现不同的组件，我想通过一个数组无限循环以每 5 秒渲染一次新组件：

import cenLogo from "./images/CKBRlogo.jpg";
import "./index.css";
import "./App.css";
import Weather from "./components/weather";
import SnowMan from "./components/snowMan";




function App() {
 
  const toShow = [<Weather/>, <SnowMan/>]


  
  return (
    
    <div className="App bg-gray-200 h-screen w-full p-6 font-sansImported ">
      <div className="h-2/3">
        <img alt="mainLogo" src={cenLogo} className=" rounded mx-auto" height="10" width="90" />
        <h1 className="text-centaraGold text-5xl mt-6 mb-6">What is up today?</h1>
          {toShow[0]}
      {/*THIS IS WERE I WANT TO LOOP INDEFINITELY THROUGH THE ARRAY*/}
        <footer className="fixed bottom-0 w-screen text-gray-500 text-xs">
        <p >Made by Florent Hebinger</p>
        </footer>
      
     
      </div>
      
     
    </div>
  );
}

export default App;

或者有没有办法用反应路由器做到这一点？

谢谢

【问题讨论】：

标签： reactjs loops infinite-loop

【解决方案1】：

我找到了解决上述问题的方法，没有出现错误。

我使用 useEffect() ant setInterval

useEffect(() => {
const carousel = setInterval(() => {
  comp === toShow.length - 1
    ? setcomp(0) && clearInterval(carousel)
    : setcomp(comp + 1);
}, 7000);
return () => {
  clearInterval(carousel);
};

我使用 react-fade-in 作为过渡部分。

【讨论】：