在 React 中管理同一元件的多個例項中的狀態

當您使用 react 並擁有同一元件的多個例項時，管理狀態可能會變得很棘手。根據元件需要互動的方式，您需要以不同的方式處理狀態。這是我發現效果很好的方法。 獨立例項：將狀態保留在元件內部如果您的元件不需要相互通訊，最好將它們的狀態保留在元件內。這樣，每個例項都有自己的狀態，其中一個例項的更改不會影響其他例項。function counter() { const [count, setcount] = usestate(0); return ( <div> <p>count: {count}</p> <button onclick="{()"> setcount(count + 1)}&gt;increment</button> </div> );}// usage<counter></counter> // instance 1<counter></counter> // instance 2登入後複製在這裡，每個 counter 元件都會跟蹤自己的計數。因此，如果您單擊一個計數器中的按鈕，則不會更改另一個計數器中的計數。 依賴例項：管理父元件中的狀態但是，如果元件需要共享某些狀態或以協調的方式工作，最好將狀態移至父元件。父級可以管理共享狀態並將其作為 props 傳遞下來。這可確保所有例項保持同步並順利協同工作。function Parent() { const [sharedCount, setSharedCount] = useState(0); return ( <div> <p>Total Count: {sharedCount}</p> <counter count="{sharedCount}" setcount="{setSharedCount}"></counter><counter count="{sharedCount}" setcount="{setSharedCount}"></counter></div> );}function Counter({ count, setCount }) { return ( <div> <p>Count: {count}</p> <button onclick="{()"> setCount(count + 1)}&gt;Increment</button> </div> );}登入後複製這種方法之所以有效，是因為當狀態位於父元件中時，對該狀態的任何更新都會觸發所有例項的重新渲染，確保它們都顯示最新的 ui。如果將狀態單獨儲存在每個例項中，則只有狀態發生更改的例項才會重新渲染，從而導致例項之間的 ui 不一致。我的專案中的示例我在構建手風琴元件時發現了這一點。這是我自己工作中的兩個例子：獨立手風琴例項：示例。在此設定中，每個手風琴例項獨立工作。依賴的手風琴例項：示例。在此版本中，所有手風琴例項相互依賴並保持同步。快速回顧如果元件單獨工作，請將狀態儲存在每個元件內。如果他們需要共享狀態或以協調的方式一起工作，請在父級中管理狀態。在構建這些手風琴示例時，這種方法對我產生了很大的影響。希望對你也有幫助！ 以上就是在 React 中管理同一元件的多個例項中的狀態的詳細內容，更多請關注我的其它相關文章！