如何在不使用 Redux 的情況下從 React 中的巢狀子元件更新父元件的狀態？

在不使用 Redux 的情況下更新 React 中的父級狀態

許多開發人員遇到了在嵌套元件之間通訊狀態的挑戰。當子元件需要更新更高階父元件的狀態時，會出現一種常見情況。這會成為問題，因為 React 規定 props 是不可變的。

考慮以下組件結構：

Component 1
  - Component 2
    - Component 4
      - Component 5
Component 3

在這種情況下，組件 3 需要存取組件 5 中儲存的狀態。直觀地將組件 5 的狀態作為 prop 傳遞給組件 1，並將其轉發給其他組件。然而，React 的不變性規則禁止這種方法。

解決此問題的一種方法是使用父元件提供的函數來實作子父通訊。考慮以下程式碼片段：

class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

  render() {
    return <child handler="{this.handler}"></child>
  }
}

class Child extends React.Component {
  render() {
    return <button onclick="{this.props.handler}/">
  }
}</button>

在此範例中，父元件提供的處理函數會作為 prop 傳遞給子元件。當子元件中的按鈕被點擊時，它會呼叫處理函數，更新父元件的狀態。

需要注意的是，此解決方案需要重構元件層次結構以確保元件之間的邏輯關係。在給定的範例中，組件 5 和組件 3 可能不直接相關。因此，可能有必要建立一個包含它們的新元件，以便有效地管理狀態。

以上是如何在不使用 Redux 的情況下從 React 中的巢狀子元件更新父元件的狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！