在沒有外部函式庫的情況下，子元件如何在 React 中更新父元件的狀態？

React 中的父子狀態管理

在 React 應用程式中，您可能會遇到子元件需要更新父元件狀態的場景。雖然 props 預設情況下是不可變的，但有一些方法可以在不使用 Redux 等外部程式庫的情況下實現此功能。

解決方案

對於子-父級通信，您可以使用作為 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} />;
  }
}

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

在這種情況下：

• Parent 將處理函數作為 prop 傳遞給 Child。
• 當點擊 Child 中的按鈕時，它會呼叫處理函數。
• Parent 中的處理函數更新了 someVar 狀態父級。

替代解決方案

如果您正在處理不相關的組件（例如示例中的組件5 和組件3），您可以重組組件：

• 建立一個新的更高階元件，其中包含兩個元件（元件 1和組件3).
• 將狀態從較高層級的組件作為 props 傳遞給較低層級的組件。

這種方法可以讓你有效地管理不相關元件之間的狀態，而無需依賴中間狀態共享機制。

以上是在沒有外部函式庫的情況下，子元件如何在 React 中更新父元件的狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！