React学习之组件通信，refs，key，ReactDOM

React学习之组件通信，refs，key，ReactDOM

1、组件间通信

父组件向子组件通信

React中规定了明确的单向数据流，利用props将数据从父组件传递到子组件，让父子组件进行通信，故父组件向子组件通信还是很容易实现的。引申一点，父组件怎么向孙子组件通信呢？可以利用props进行层层传递，使用ES6的…运算符可以用很简洁的方式把props传递给孙子组件。这里我们就不举例了。

子组件向父组件通信

子组件向父组件通信的方法也可以利用props，父组件利用props将一个方法传递给子组件，子组件回调这个方法的同时，将数据传递进去，是的父组件的相关方法得到回调，这个时候就可以进行子组件向父组件的通信了。下面看一个例子：

class Parent extends Component {
   
    handleMsg (msg) {
   
        console.log(msg)
    }
    render () {
   
        <div >
            <Child transferMsg = {
   msg => this.handleMsg(msg)}>
        </div>
    }
}
class Child extends Component {
   
    componentWillMount () {
   
        this.props.transferMsg('this is msg');
    }
    render () {
   
        <div