我在螢屏上有三個大小相同但靜態資料不同的組件。
我不想在同一區域的螢屏上每 5 秒更換一次（顯示位置是固定的）。例如。我有<FeedbackComp1>和。所以，我想每 5 秒顯示和更換一次組件。<FeedbackComp2><FeedbackComp3>
顯示：第一次渲染螢屏顯示<FeedbackComp1>，然后替換位置<FeedbackComp2>，然后<FeedbackComp3>依次<FeedbackComp1>類推。
如果可能的話，陣列 map() 函式中的這個功能，所以我也準備好了。
謝謝你。
uj5u.com熱心網友回復：
像這樣的東西應該可以解決問題。
import { useEffect, useState } from 'react'
// placeholders for your actual components.
const FeedbackComp1 = () => <></>
const FeedbackComp2 = () => <></>
const FeedbackComp3 = () => <></>
const MyComponentSwitcher = () => {
const [index, setIndex] = useState(0)
const components = [<FeedbackComp1/>, <FeedbackComp2/>, <FeedbackComp3/>]
useEffect(() => {
const interval = setInterval(() => {
setIndex(currentIndex => (currentIndex 1) % components.length)
}, 5000)
return () => clearInterval(interval)
}, [])
return components[index]
}
簡短說明：
index狀態變數保存我們當前的索引。- 該
components陣列包含您要在其間切換的組件。 - 初始化 5000 毫秒的
useEffect間隔，因此每 5 秒，它會將索引設定為比當前多一個，使用余數運算子%確保我們永遠不會在陣列之外有索引。- 請注意，
setIndex不接受新值，而是回呼。這允許我們自動將值設定為比以前大一，而無需在組件初始化時參考該值。反應參考。
- 請注意，
- 該
return陳述句僅回傳當前組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528291.html
標籤：反应反应式