本篇文章帶給大家的內容是關於React元件通訊的介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
最近閒來無事自學React框架，自學過程中所有的問題經驗都會在此記錄，希望可以幫助到學習React框架的同學,廢話不多說上代碼。
首先是父傳子：
import React, { Component } from 'react';
import Com1 from './componments/com1'
class App extends Component {
constructor(props){
super(props)
this.state = {
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
},]
};
this.foo = "我来自父组件" //这个也是父传子方法，可能初学者有点迷，刚开始我也用来和arr = {this.state.arr}做区分
};
render() {
return (
<div>
<header>
<img alt="React元件通訊的介紹（程式碼範例）" >
</header>
<com1></com1>
</div>
);
}
}
export default App;子元件：
import React, { Component } from 'react';
class Ele extends Component{
constructor(props){
super(props)
};
render(){
return (
<div>
<h1>Hello, {this.props.age}</h1>
<p>{this.props.fn}</p>
<ul>
{
this.props.arr.map(item => { //这个地方通过this.props.arr接收到父组件传过来的arr，然后在{}里面进行js的循环
return (
<li>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
</div>
);
};
}
export default Ele;結果顯示：
以上是父傳子的方法，主要還是使用props傳值，下面看看子傳父.
子傳父：
首先是子元件：
import React, { Component } from 'react';
class Ele extends Component{
constructor(props){
super(props);
this.state = ({
childText: "我来自子组件"
})
};
clickFun(text) { //定义触发的方法
this.props.pfn(text)//这个地方把值传递给了props的事件当中
}
render(){
return (
<div>
{/* 通过事件进行传值，如果想得到event，可以在参数最后加一个event，
这个地方还是要强调，this，this，this */}
<button>
传值
</button>
</div>
);
};
}
export default Ele;父元件：
import React, { Component } from 'react';
import Com1 from './componments/com1'
class App extends Component {
constructor(props){
super(props)
this.state = {
parentText: "现在是父组件",
};
fn(data) {
this.setState({
parentText: data //把父组件中的parentText替换为子组件传递的值
},() =>{
console.log(this.state.parentText);//setState是异步操作，但是我们可以在它的回调函数里面进行操作
});
};
render() {
return (
<div>
<com1></com1> {/*通过绑定事件进行值的运算，这个地方一定要记得.bind(this)，不然会报错，切记切记，因为通过事件传递的时候this的指向已经改变 */}
<p>text is {this.state.parentText}</p>
</div>
);
}
}
export default App;以上是父子元件傳值的方法，有不對的地方還望指正
還有兄弟元件傳值還沒學到，兄弟元件傳值學到會更新上來
【相關推薦：React影片教學】
#以上是React元件通訊的介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
