本篇文章给大家带来的内容是关于React组件通信的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近闲来无事自学React框架,自学过程中所有的问题经验都会在此记录,希望可以帮助到学习React框架的同学,废话不多说上代码。
首先是父传子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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 = "我来自父组件"
};
render() {
return (
<div className= "App" >
<header className= "App-header" >
<img src={logo} className= "App-logo" alt= "logo" />
</header>
<Com1 age= "大卫" arr={this.state.arr} fn={this.foo}/>
</div>
);
}
}
export default App;
|
Salin selepas log masuk
子组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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 => {
return (
<li key={item.userName}>
{item.userName} 评论是:{item.text}
</li>
)
})
}
</ul>
</div>
);
};
}
export default Ele;
|
Salin selepas log masuk
结果显示:
以上是父传子的方法,主要还是使用props传值,下面看看子传父.
子传父:
首先是子组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import React, { Component } from 'react' ;
class Ele extends Component{
constructor(props){
super(props);
this.state = ({
childText: "我来自子组件"
})
};
clickFun(text) {
this.props.pfn(text)
}
render(){
return (
<div>
{
}
<button onClick={this.clickFun.bind(this, this.state.childText)}>
传值
</button>
</div>
);
};
}
export default Ele;
|
Salin selepas log masuk
父组件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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
},() =>{
console.log(this.state.parentText);
});
};
render() {
return (
<div className= "App" >
<Com1 pfn={this.fn.bind(this)}/> { }
<p>text is {this.state.parentText}</p>
</div>
);
}
}
export default App;
|
Salin selepas log masuk
以上是父子组件传值的方法,有不对的地方还望指正
还有兄弟组件传值还没学到,兄弟组件传值学到会更新上来
【相关推荐:React视频教程】
Atas ialah kandungan terperinci React组件通信的介绍(代码示例). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!