总结

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

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

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

解释：

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

import React from "react"
//  App son
// 父传子 props 函数
// 子传父： 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
// props 接受所有父传子传递过来的数据
// 这里是子组件
function Son (props) {// props 接收所有父传子传递过来的数据console.log(props)const { getSonMsg } = propsreturn (// 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.在子组件内选择合适的时机执行这个函数 使用实参执行之后 在父组件中使用形参接收一下*/