react父子组件通信-Toy模板网

这篇具有很好参考价值的文章主要介绍了react父子组件通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

总结

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

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

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

解释：

因为react是单向数据流，数据只能从父组件通过属性的方式传递给子组件文章来源地址https://www.toymoban.com/news/detail-731627.html

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.在子组件内选择合适的时机执行这个函数 使用实参执行之后 在父组件中使用形参接收一下
 */

到了这里，关于react父子组件通信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！