React组件通信总结

react组件通信无非就是这几种情况：父子组件通信、爷孙/祖孙之间通信、兄弟组件通信、其他关系组件通信。

父子组件的通信

父传子

因为 React 的设计实际上就是传递 Props 即可。那么场景体现在容器组件与展示组件之间，通过 Props 传递 state，让展示组件受控。

可以在子组件标签上定义属性将父组件的值传进去，在子组件可以使用props接收传进来的属性值。示例：

function Parent() {
  const [data, setData] = useState(1)
  const change = () => {
    setData(data + 1)
  }
  return (
    <div onClick={change}>
      父传子
      <Child data={data} />
    </div>
  )
}
function Child(props) {
  return (
    <div>
      子组件接收到的值：{props.data}
    </div>)
} 

子传父

有两种方式可以支持子传父，可以使用回调函数与实例函数。

1、使用回调函数

在父组件内定义一个回调函数getChildVal，将这个函数绑定在子组件上通过props传入子组件，当子组件中是事件或者什么时机需要向父组件传值时，在子组件内就可以调用这个函数并传入值，此时定义在父组件的函数被触发，并且可以拿到子组件的传值