1.通过父组件创建的方法,以及props来实现
例子: 组件A,组件B,组件B要更改组件A中state的数据
A
render() {
return (
<div>{this.props.name}</div>
)
}
B
handleUpdataName = (event)=>{
// 判断是否按下回车 按下回车调用App传过来的updataName方法更新数据
if(event.keyCode!==13) return;
this.props.updataName(event.target.value)
}
render() {
return (
<div>
{/* 按键绑定,抬起时触发handleUpdataName */}
<input onKeyUp={this.handleUpdataName} type="text" placeholder='请输入要改的名字,按回车更新'/>
</div>
)
}
App
// 在B组件中改name的方法
updataName = (name)=>{
this.setState({name})
}
// A组件要用的数据
state = {name:'zhang'}
render() {
return (
<div>
<A name = {this.state.name}/>
<B updataName={this.updataName}/>
</div>
)
}
2.消息订阅与发布。
需要下载第三方包pubsub-js(https://github.com/mroderick/PubSubJS)
使用方法
先npm安装在导入
Import PubSub from ‘pubsub-js’
导入后在要订阅的组件的componentDidMount钩子中写
this.id = PubSun.subscribe(‘name’,(name,data)=>{})
同时记得在componentWillUnmount钩子中卸载订阅
PubSub.unsubscribe(this.id)
在发布消息的组件中写
PubSun.publish(‘name’,data)
例子:组件A,组件B,组件B要更改组件A中state的数据
A
// 组件挂在完毕
componentDidMount(){
// 消息订阅
this.updataNameId = PubSub.subscribe('updataName',(_,name)=>{
this.setState({name})
})
}
// 组件将要销毁
componentWillUnmount(){
// 取消订阅
PubSub.unsubscribe('updataNameId')
}
// 数据
state = {name:'zhang'}
render() {
return (
<div>{this.state.name}</div>
)
}
B
handleUpdataName = (event)=>{
// 判断是否按下回车
if(event.keyCode!==13) return;
// 发送消息
PubSub.publish('updataName',event.target.value)
}
render() {
return (
<div>
{/* 按键绑定,抬起时触发handleUpdataName */}
<input onKeyUp={this.handleUpdataName} type="text" placeholder='请输入要改的名字,按回车更新'/>
</div>
)
}
App
render() {
return (
<div>
<A/>
<B/>
</div>
)
}