react兄弟组件间数据传递问题

1、兄弟组件传递数据

实际是综合运用了子传父，父传子的原理: sonA——>父组件——>sonB

代码如下（示例）：

import React from 'react'

// 子组件A
function SonA(props) {
    
    
  return (
    <div>
      SonA
      {
    
    props.msg}
    </div>
  )
}
// 子组件B
function SonB(props) {
    
    
  return (
    <div>
      SonB
      <button onClick={
    
    () => props.changeMsg('new message')}>changeMsg</button>
    </div>
  )
}

// 父组件
class App extends React.Component {
    
    
  // 父组件提供状态数据
  state = {
    
    
    message: 'this is message'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    
    
    this.setState({
    
    
      message: newMsg
    })
  }

  render() {
    
    
    return (
      <>
        {
    
    /* 接收数据的组件 */}
        <SonA msg={
    
    this.state.message} />
        {
    
    /* 修改数据的组件 */}
        <SonB changeMsg={
    
    this.changeMsg} />
      </>
    )
  }
}

export default App

关键点

父组件中从子组件那里拿参数newMsg(数据)来执行的同时，在函数中将数据赋值给了父组件的状态数据，然后父组件状态数据又绑定给另一个子组件属性：

// 父组件提供状态数据
  state = {
    
    
    message: 'this is message'
  }
// 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    
    
    this.setState({
    
    
      message: newMsg
    })
  }