《React+Redux前端开发实战》—2.3 组件之间的通信

2.3  组件之间的通信

　　React编写的应用是以组件的形式堆积而成的，组件之间虽相互独立，但相互之间还是可以通信的。本节将介绍组件中的几种通信方式。

2.3.1  父组件向子组件通信

　　前面章节已经提到过，React的数据是单向流动的，只能从父级向子级流动，父级通过props属性向子级传递信息。

　　父组件向子组件通信示例：

　　（源码地址为https://jsfiddle.net/n5u2wwjg/35403/）

　　class Child extends React.Component {

　　    render (){

　　        return (

　　         <div>

　　            <h1>{ this.props.fatherToChild }</h1>

　　          </div>

　　        )

　　    }

　　}

　　class App extends React.Component { 

　　  render() {

　　    let data = 'This message is from Dad!'

　　    return (

　　     <Child fatherToChild={ data } />

　　    )

　　  }

　　}

　　ReactDOM.render(

　　 <App/>,

　　 document.querySelector("#app")

　　)

　　上述代码中有两个组件：子组件Child和父组件App。子组件在父组件中被引用，然后在父组件内给子组件定了一个props：fatherToChild，并将父组件的data传递给子组件中展示。

注意：父组件可以通过props向子组件传递任何类型。