如何在 React 中從子元件更新父元件的狀態？

React 中的子父狀態管理

在React 中，維護元件層次結構中的狀態可能具有挑戰性，尤其是當父元件需要從子元件更新。提供的範例示範了父子組件結構，其中組件 3 需要根據組件 5 的狀態顯示資料。

雖然 props 通常是不可變的，但這並不意味著不可能從子組件更新父組件的狀態。以下是實現它的方法：

將狀態設定函數作為 props 從父級傳遞給子級。這允許子級在呼叫時更新父級的狀態。

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>

在此範例中，子級可以從父級存取處理函數。當按一下子層級中的按鈕時，將呼叫處理程序，更新父級的狀態。

但是，考慮組件結構很重要。就您而言，組件 5 和組件 3 沒有直接相關。為了解決這個問題，您可以引入一個更高層級的元件來封裝元件 1 和 3 的狀態。然後，這個中間元件將為較低階的元件提供必要的 props。

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