如何從 React 中的深層嵌套子元件更新父元件狀態？

如何在不使用Redux 的情況下在React 中將狀態更新從子元件傳播到父元件

React 的單向資料流模型通常會為更新父組件帶來挑戰國家來自他們的後代。讓我們考慮存在以下組件結構的場景：

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

組件 3 的目標是根據組件 5 的狀態顯示資料。由於 props 是不可變的，因此將狀態從元件 5 傳遞到元件 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} />;
  }
}

class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

在此範例中，父元件透過 props 將回調函數 handler() 傳遞給子元件。當子元件呼叫此函數時，會觸發父元件中的狀態更新，從而允許狀態變更在元件樹中向上傳播。

雖然此方法解決了眼前的挑戰，但可能需要重新考慮組件結構。在給定的場景中，組件 5 和組件 3 似乎沒有直接關係。為了緩解這個問題，可以考慮將它們包裝在一個更高層級的元件中，該元件管理兩個元件的狀態並透過 props 傳播它。這允許更加模組化和可維護的解決方案。

以上是如何從 React 中的深層嵌套子元件更新父元件狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！