如何讓兩個組件在 React 中通信？

Question

我剛剛開始使用 React，我正在努力弄清楚如何讓 2 個組件相互通信以交換數據。 例如，我正在嘗試構建一個計算器，它具有組件按鈕及其值和組件輸入字段，該字段應該顯示按鈕的值。 我想我可以弄清楚如何編寫代碼，但我很難理解，如何讓他們彼此了解？ 謝謝！

Answer 1

1）在父組件中定義 state 和處理程序 2）將它們作為道具發送到 2 個子組件。 3) 一旦 state 被 2 個子組件中的任何一個更改，更改將立即生效。 我希望這能幫到您。

Answer 2

你可以通過兩種方式做到這一點

1 - 在他們之間進行交流的道具

class Calculator extends React.Component {
    this.state ={
    num1:1,
    num2:2
    }
  render() {
    return <Sum num1={this.state.num1} num2={this.state.num2}>;
  }
}

const sum =(props)=>{
    return (
      <div>
     {props.num1+props.num2}
      </div>
    );
}

2 - 您可以使用任何 State 管理解決方案進行反應（但前提是它是一個復雜的應用程序）

Answer 3

如果您有兩個組件（我們稱它們為 A 和 B），您可以通過在它們的一個共同父項中定義上下文，甚至到應用程序的根目錄，使它們相互“交談”。 然后，您可以從 A 和 B 訂閱此上下文 (useContext)，並隨時將數據推送到上下文中。 這將觸發所有使用此上下文的組件的重新渲染，然后它們將獲取此更新數據。

在父級中使用常見的 state 並將其作為道具傳遞給 A 和 B 也可以，但我建議在上下文中執行此操作是涵蓋 A 和 B 不是虛擬 DOM 樹中的兄弟姐妹的情況，例如很難傳遞道具對他們來說，從父母那里，但是通過簡單地使用一個共同的上下文來做到這一點非常容易。

希望這能回答您的問題：:)

Answer 4

來自 OOP，我傾向於使用簡單的createRef()方法，作為一種以簡單的方式將組件的方法公開給另一個組件的方法。

下面是一個非常簡單的例子：

class MyComponent extends Component {
   constructor(props) {
      this.compRef = React.createRef()
   }

   onSomething = (val) => {
      this.compRef.current.setState({key: val})
   }

   render() {
      return (
         <SomeComponent ref={this.compRef} />
         <SomeOtherComponent onChange={this.onSomething} />
      )
   }

}