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

透過React 中的回呼函數傳遞父狀態更新

使用巢狀React 元件時，可能需要更新父元件的狀態子元件中的父組件。由於 props 是不可變的，因此直接為其賦值是不可行的。

在這種情況下，另一種方法是將函數傳遞給子元件，以允許其更新父元件的狀態。這可以透過以下方式實現：

// Parent Component
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 Component
class Child extends React.Component {
  render() {
    return <Button onClick={this.props.handler} />;
  }
}

透過這種機制，子元件可以呼叫 props 提供的函數並更新父元件的狀態。

但是，需要注意的是，組件結構可能需要重新評估。您的範例中的組件 5 和 3 似乎沒有直接關係。

一個潛在的解決方案是引入一個封裝組件 5 和 3 的更高等級組件。該父元件可以維護與兩個子元件並透過 props 將其傳遞下來。

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