react父子组件传参

父子组件通信主要用到props，如下：

react父子组件传参

在父组件中：

import React from 'react'
import ChildCom from './childCom.js'
class ParentCom extends React.Component {
 render() {
 return (
 <div>
 <h1>父组件</h1>
 <ChildCom content={'我是父级过来的内容'}/>
 </div>
 )
 }
}
export default ParentCom;

在子组件中：

import React from 'react'
class ChildCom extends React.Component {
 render() {
 return (
 <div>
 <h2>子组件</h2>
 <div>
 {this.props.content}
 </div>
 </div>
 )
 }//欢迎加入全栈开发交流群一起学习交流：864305860
}
export default ChildCom;

通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过props获取父组件传过来的参数

子级向父级传参

在父组件中：

import React from 'react'
import ChildCom from './childCom.js'
class ParentCom extends React.Component {
 state = {
 getChildValue: ''
 }
 getChildValue(value) {
 this.setState({
 getChildValue: value
 })
 }
 render() {
 return (
 <div>
 <h1>父组件</h1>
 <div>子组件过来的值为：{this.state.getChildValue}</div>
 <ChildCom onValue={this.getChildValue.bind(this)}/>
 </div>
 )
 }
}
export default ParentCom;

在子组件中：

import React from 'react'
class ChildCom extends React.Component {
 valueToParent(value) {
 this.props.onValue(value);
 }
 render() {
 return (
 <div>
 <h2>子组件</h2>
 <div>
 <a onClick={this.valueToParent.bind(this,123)}>向父组件传值123</a>
 </div>
 </div>
 )
 }
}
export default ChildCom;

子组件向父组件传参，其实就是在父组件中给子组件添加一个属性，这个属性的内容为一个函数，然后在子组件中调用这个函数，即可达到传递参数的效果(了解更多)
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。