如何让两个组件在React中进行通信？

Question

我刚刚开始使用React，我正在努力弄清楚如何使2个组件之间相互通信以交换数据。例如，我正试图构建一个计算器，它有带值的组件按钮和应该显示按钮值的组件输入字段。我想我可以弄清楚如何写代码，但我很难理解，如何让它们互相了解？谢谢你！我刚开始使用React和React，但我不知道怎么写。

Answer 1

你可以通过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 - 你可以为react使用任何状态管理解决方案（但仅限于复杂的应用程序）。

Answer 2

1）在父组件中定义状态和处理程序2）将它们作为道具发送给2个子组件3）一旦状态被2个子组件中的任何一个改变，变化就会立即影响。

Answer 3

如果你有两个组件（让我们称它们为A和B），你可以通过在它们的一个共同的父组件中定义一个上下文，甚至是应用的根部，让它们彼此之间 "对话"，然后你可以从A和B两个组件中订阅这个上下文（useContext），并将数据推送到上下文中，只要你愿意。这将触发所有正在使用这个上下文的组件的重新渲染，然后它们将得到这个更新的数据。

在父体中使用共同状态并将其作为道具传递给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} />
      )
   }

}