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