Communication between components
5.1.1 way: Passing through the props
1) common data on the parent component, specific data on their own internal components (state)
2) can pass through the general data and function data props, one layer at a transmission
3) General Data -> parent component subassembly to pass data -> sub-assembly to read data
4) Data Functions -> sub-assembly components pass data to the parent -> child component calls the function
5.1.2 Second way: using a message subscription (subscribe) - release (publish) mechanism
1) tool library: PubSubJS
2) Download: npm install pubsub-js --save
3) Use:
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){ }); //订阅
PubSub.publish ( 'delete', data) // news release
5.1.3 Three ways: redux
Detail later learning
Subscribe to publish examples:
// Import Import the PubSub from " PubSub-JS " // publish data where there class the Data the extends React.Component { pubmsg = () => { PubSub.publish ( " channel " , " channel announcement " ) } the render () { return ( <Button the onClick = { the this .pubmsg}> the Data component, announced </ Button> ) } } // subscription class the App the extends the component { // assembly to be rendered when the subscription componentWillMount () { PubSub.subscribe ("频道", (msg,data)=> { console.log(msg,data) }) } render() { return ( <div className="App"> <Data /> </div> ); } }