组件间通信
5.1.1. 方式一: 通过props传递
1) 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
2) 通过props可以传递一般数据和函数数据, 只能一层一层传递
3) 一般数据-->父组件传递数据给子组件-->子组件读取数据
4) 函数数据-->子组件传递数据给父组件-->子组件调用函数
5.1.2. 方式二: 使用消息订阅(subscribe)-发布(publish)机制
1) 工具库: PubSubJS
2) 下载: npm install pubsub-js --save
3) 使用:
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){ }); //订阅
PubSub.publish('delete', data) //发布消息
5.1.3. 方式三: redux
后面详细学习
发布订阅例子：
// 导入
import PubSub from "pubsub-js" // 在有数据的地方进行发布
class Data extends React.Component{
pubmsg = ()=>{
PubSub.publish("频道","频道发布的消息")
}
render() {
return(
<button onClick={this.pubmsg}>Data组件,发布消息</button>
)
}
} // 订阅
class App extends Component {
// 组件将要被渲染的时候进行订阅
componentWillMount() {
PubSub.subscribe("频道", (msg,data)=> {
console.log(msg,data)
})
} render() {
return (
<div className="App">
<Data />
</div>
);
}
}