在單頁面裡面，父子元件傳值是比較常見的，這篇文章主要介紹了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;`
 

以上就是本文的全部內容，希望對大家的學習有所幫助，