react父子组件通信

总结

父传子：最常见 把父组件中的数据传给子组件

子传父：子组件调用父组件传递过来的参数，并且把想要传递的数据当成函数的实参传入即可 【子组件通过调用父组件传递到子组件的方法向父组件传递数据】

对于子传父中子组件还是先调用了父组件传递过来的参数，之后再向父组件传递数据是因为什么呐？？？

解释：

因为react是单向数据流，数据只能从父组件通过属性的方式传递给子组件

import React from "react"
//  App son
// 父传子 props 函数
// 子传父： 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
// props 接受所有父传子传递过来的数据
// 这里是子组件
function Son (props) {
  // props 接收所有父传子传递过来的数据
  console.log(props)
  const { getSonMsg } = props
  return (
    // 1.1.3 在这里进行参数的传递 
    <div>this is son<button onClick={() => getSonMsg('这里是来自于子组件中的数据')}>click</button></div>
  )
}
// 这里是父组件
class App extends React.Component {
  // 1. 1.1在父组件中准备一个函数传给子组件    1.1.4 上面传了实参 这里用形参接收一下并输出就行了
  getSonMsg = (sonMsg) => {
    console.log('sonMsg', sonMsg)
  }
  render () {
    return (
      <div>
        {/*1.  1.2 */}
        <Son getSonMsg={this.getSonMsg}></Son>
      </div>
    )

  }
}

export default App
// 这里实现了子传父 
/**
 * 1.实现步骤：在父组件里面准备一个函数
 * 2.在子组件内选择合适的时机执行这个函数 使用实参执行之后 在父组件中使用形参接收一下
 */