脚本宝典收集整理的这篇文章主要介绍了初识React(8)：父子组件传参，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
父级向子级传参
在父组件中：
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>
)
}
}
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;
在子组件中：
)
}
}
export default ChildCom;
" title="" data-original-title="复制">
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;
子组件向父组件传参，其实就是在父组件中给子组件添加一个属性，这个属性的内容为一个函数，然后在子组件中调用这个函数，即可达到传递参数的效果
以上是脚本宝典为你收集整理的初识React(8)：父子组件传参全部内容，希望文章能够帮你解决初识React(8)：父子组件传参所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。