组件之间的通信方式
- 父向子
- 子向父
- 兄弟间
这里主要介绍前两种
1.父组件向子组件通信(子类用父类的资源)
子组件用父组件属性
eg:这里的
likedText
与unlikedText
class LikeButton extends Component { render () { return ( <ToggleButton likedText='喜欢' unlikedText='讨厌' /> ); } }; class ToggleButton extends Component { constructor () { super(); this.handleClickOnLikeButton = this.handleClickOnLikeButton.bind(this); this.state = {isLiked: true}; } handleClickOnLikeButton () { this.setState({ isLiked: !this.state.isLiked }) } render () { return ( <button onClick={this.handleClickOnLikeButton} > {this.state.isLiked ? this.props.likedText : this.props.unlikedText} </button> ); } };
- 子组件用父组件方法
eg:这里的
handleChange
方法class HelloMessage extends Component { constructor () { super(); this.handleChange = this.handleChange.bind(this); this.state = {value: 'Hello Runoob!'}; } handleChange (event) { this.setState({value: '菜鸟教程'}); } render () { return ( <div> <Content myDataProp = {this.state.value} that = {this}> </Content> </div> ); } }; class Content extends Component { handleClick () { let that = this.props.that; that.handleChange(); } render () { console.log('updateStateProp',this.props.updateStateProp); return( <div> <button onClick = {this.handleClick.bind(this)}>点我</button> <h4 style={{fontSize: '20px'}}>{this.props.myDataProp}</h4> </div> ) } };
- 这里将父类的
this
赋给that
属性 - 在子类中将父类的that属性赋给 that变量,
this.props.that
,再将父类的方法在子类中包装起来handleClick()
- 这样在子类中就可以直接调用
handleClick
啦!
2.子组件向父组件通信(父类用子类的资源)
要调用子组件的方法或者属性,需要在调用子组件的时候定义ref
属性,且唯一
// 父组件用子组件属性
// 子类
class ButtonComment extends Component {
constructor () {
super();
this.sendSword = this.sendSword.bind(this);
this.state = {count: 0 };
}
sendSword () {
//这里用回调,setState之后再调用父类的方法进行设置
this.setState({count:this.state.count + 10}, () => {
// debugger;
console.log('this.state.count',this.state.count);
this.props.getSwordCount2(); //子类调用父类方法的正确写法
// this.props.getSwordCount2; //这种写法不会调用的
// this.props.getSwordCount(); //这种写法会报错的
});
}
render () {
return (
<button onClick={this.sendSword}>{this.props.buttonName}</button>
);
}
};
class ImDaddyComponent extends Component {
constructor () {
super();
this.sendSwordParent = this.sendSwordParent.bind(this);
this.getSwordCount = this.getSwordCount.bind(this);
this.state = {sendCount: 0 };
}
sendSwordParent () {
// 父类调用子类的方法
this.refs.getSwordButton.sendSword();
console.log(' this.refs.getSwordButton', this.refs.getSwordButton);
}
getSwordCount () {
//通过 this.refs.getSwordButton 获取 子类对象 加完之后将加完的结果通知给子类,即,将结果通过 this.refs.getSwordButton 给子类的state.count 设置
this.setState({sendCount: this.refs.getSwordButton.state.count + 1}, () => {
this.refs.getSwordButton.setState({
count: this.refs.getSwordButton.state.count + 1
});
});
}
render () {
return (
<div>
<ButtonComment ref="getSwordButton" getSwordCount2={this.getSwordCount} buttonName="儿子送宝刀"/>
<button onClick={this.sendSwordParent}>通过老爸送宝刀</button>
<p style={{fontSize: '20px'}}>
父子俩共送{this.state.sendCount}把宝刀!!!
</p>
</div>
);
};
};
ReactDOM.render(
<ImDaddyComponent />,
document.getElementById('app')
);
【总结】
1.子类调用父类方法时,
this.props.getSwordCount2()
,其中getSwordCount2
为父类的属性,调用它要加()
,this.props.getSwordCount2; //这种写法不会调用的 this.props.getSwordCount(); //这种写法会报错的
2.父类调用子类方法时
通过
this.refs.getSwordButton
获取子类,然后.sendSword()
,其中sendSword()
为子类的方法3.回调的运用
想子类setSate之后再通过父类改变状态,
this.setState({}, () => {
调用父类方法
});4.通知子类
父类改变状态之后,重新找到子类,给子类 setSate,