在单页面里面，父子组件传值是比较常见的，这篇文章主要介绍了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``(`` `` `` 接受子组件的传值为：{``this``.state.txt1} `` `` `` ``)``}``}` 子组件：`import React, { Component } from` `'react'``;``class child extends Component{``constructor(props) {``super``(props);``this``.state = {``msg:``"啦啦啦啦"``}``}``componentDidMount(){``}``render(){``return``(`` `` 接受父组件传的值为：{``this``.props.message} `` `` ``)``}``}`欢迎加入全栈开发交流划水交流圈：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` `(`` ``//通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，``不然会报错，切记切记，因为通过事件传递的时候``this``的指向已经改变`` `` `` ``text is {``this``.state.parentText}``
`` ``)``}``}`欢迎加入全栈开发交流划水交流圈：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` `(`` `` ``{``this``.props.arr.map(item => {``return` `(`` - ``{item.userName} 评论是:{item.text}``
``)``})``}``
``//通过事件进行传值，如果想得到event，可以在参数最后加一个event，``这个地方还是要强调，``this``，``this``，``this`` `` ``)``}``}``export` `default` `ComentList;`复制代码 以上就是本文的全部内容，希望对大家的学习有所帮助，