首頁 > web前端 > js教程 > 如何在 React 中從子元件更新父元件狀態?

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

Linda Hamilton
發布: 2024-12-10 00:29:11
原創
279 人瀏覽過

How to Update Parent Component State from a Child Component in React?

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板