在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了React父子组件间的传值的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
父组件向子组件传值：
父组件：
`import React, { Component } from` `'react'``;`
`import Child from` `'./chlid'``;`
`class parent extends Component{`
`constructor(props) {`
`super``(props);`
`this``.state = {`
`txt0:``"默认值0"``,`
`txt1:``"默认值1"`
`}`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`componentDidMount(){`
`}`
`parToson(){`
`this``.setState({`
`txt0:``"哈哈哈哈"`
`})`
`}`
`sonToPar(e){`
`this``.setState({`
`txt1:e`
`})`
`}`
`render(){`
`const style={`
`paddingLeft:``"150px"`
`}`
`return``(`
`<div style={style}>`
`<button onClick={``this``.parToson.bind(``this``)}>传值给子组件</button>`
`<div>接受子组件的传值为：{``this``.state.txt1}</div>`
`<br/>`
`<Child message={``this``.state.txt0} getsonToPar={``this``.sonToPar.bind(``this``)}/>`
`</div>`
`)`
`}`
`}`
子组件：
`import React, { Component } from` `'react'``;`
`class child extends Component{`
`constructor(props) {`
`super``(props);`
`this``.state = {`
`msg:``"啦啦啦啦"`
`}`
`}`
`componentDidMount(){`
`}`
`render(){`
`return``(`
`<div>`
`<div>接受父组件传的值为：{``this``.props.message}</div>`
`<button onClick={()=>``this``.props.getsonToPar(``this``.state.msg)}>传值给父组件</button>`
`</div>`
`)`
`}`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`export` `default` `child;`
补充：
子组件向父组件传值，
同样是父组件：
`import React from` `"react"`
`import ComentList from` `"./ComentList"`
`class Comment extends React.Component {`
`constructor(props) {`
`sper``(props);`
`this``.state = {`
`parentText:` `"this is parent text"``,`
`arr: [{`
`"userName"``:` `"fangMing"``,` `"text"``:` `"123333"``,` `"result"``:` `true`
`}, {`
`"userName"``:` `"zhangSan"``,` `"text"``:` `"345555"``,` `"result"``:` `false`
`}, {`
`"userName"``:` `"liSi"``,` `"text"``:` `"567777"``,` `"result"``:` `true`
`}, {`
`"userName"``:` `"wangWu"``,` `"text"``:` `"789999"``,` `"result"``:` `true`
`},]`
`}`
`}`
`fn(data) {`
`this``.setState({`
`parentText: data` `//把父组件中的parentText替换为子组件传递的值`
`},() =>{`
`console.log(``this``.state.parentText);``//setState是异步操作，但是我们可以在它的回调函数里面进行操作`
`});`
`}`
`render() {`
`return` `(`
`<div>`
`//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，`
`不然会报错，切记切记，因为通过事件传递的时候``this``的指向已经改变`
`<ComentList arr={``this``.state.arr} pfn={``this``.fn.bind(``this``)}>`
`</ComentList>`
`<p>`
`text is {``this``.state.parentText}`
`</p>`
`</div>`
`)`
`}`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`export` `default` `Comment;`
子组件：
`import React from` `"react"`
`class ComentList extends React.Component {`
`constructor(props) {`
`super``(props);`
`this``.state = ({`
`childText:` `"this is child text"`
`})`
`}`
`clickFun(text) {`
`this``.props.pfn(text)``//这个地方把值传递给了props的事件当中`
`}`
`render() {`
`return` `(`
`<div className=``"list"``>`
`<ul>`
`{`
`this``.props.arr.map(item => {`
`return` `(`
`<li key={item.userName}>`
`{item.userName} 评论是:{item.text}`
`</li>`
`)`
`})`
`}`
`</ul>`
`//通过事件进行传值，如果想得到event，可以在参数最后加一个event，`
`这个地方还是要强调，``this``，``this``，``this`
`<button onClick={``this``.clickFun.bind(``this``,` `this``.state.childText)}>`
`click me`
`</button>`
`</div>`
`)`
`}`
`}`
`export` `default` `ComentList;`
以上就是本文的全部内容，希望对大家的学习有所帮助，