React兄弟、父子元素之前的通信

React元素之间的通信主要由下面几种方式
1、 Redux
2、 EventEmitter
3、 通过props进行通信（需要有嵌套关系）

这里面先记下来比较简单的第三种，因为最近刚刚用到。

子元素到父元素

父子元素之间的通信主要靠props，这个方法既简单，又好用，所以可以使用这种方法的时候就直接用好了。
首先有这样的一个React DOM结构：

<div className="passage">     <NavBar   />     <Passage /></div>

渲染外层的div元素的时候，需要进行两个子组件的渲染，其中Passage组件的加载内容取决于NavBar当前的内容或者被点击后的内容，这里可以首先实现父元素和NavBar之间的通信过程，设置一个句柄，来帮助进行通信。

    constructor (props) {        super(props);        this.state = {            currentPassage: ""        }        this.refreshCurrentPassage = this.refreshCurrentPassage.bind(this);    }    refreshCurrentPassage(cp) {        this.setState({            currentPassage: cp        });    }

上面的refreshCurrentPassage函数是这个通信过程的关键，我们将这个函数绑定当前父元素的this对象，并且将这个函数通过props传递给子元素：

    render() {        return (            <div className="passage">                <NavBar  refreshCurrentPassage={this.refreshCurrentPassage} />                <Passage currentPassage={this.state.currentPassage}/>            </div>        );    }

子元素在其生命周期的componentDidMount阶段通过ajax获取当前页信息并且调用这个函数，将消息传递给父元素，这里需要注意React的生命周期，componentDidMount在官方给出的解释是：

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.

注意是在初始化渲染之后执行一次的。如果你还有其他特殊需求的话可以在其他阶段来调用这个函数。

class NavUl extends React.Component {    constructor (props) {        super(props);        this.state = {            passage: []        }    }    componentDidMount() {    //在ajax请求成功之后调用一次更新父元素状态的函数，来完成一次父子元素之间的通信        $.ajax({            url: "../resources/data/passage.json",            success: (data) => {                this.setState({                    passage: data.passages                });                this.props.refreshCurrentPassage(data.passages[0].passageName);            }、        });    }    render() {        let liArray = [];        this.state.passage.forEach((value,index) => {            let liEle = <li key={value.passageName.toString()}>                <a>                    {value.passageName}({value.letterNum})&nbsp;author:{value.author}                </a>            </li>            liArray.push(liEle);        });        return (            <ul>                {liArray}            </ul>        )    }}class NavBar extends React.Component {    constructor (props) {        super(props);    }    render() {        return (            <nav>                <NavUl refreshCurrentPassage={this.props.refreshCurrentPassage}/>            </nav>        );    }}

这样就完成了一次父子元素的通信过程。

父元素到子元素

父元素到子元素的状态通信更加简单了，可以直接使用props来进行传递。

//父元素的render函数    render() {        return (            <div className="passage">                <NavBar  refreshCurrentPassage={this.refreshCurrentPassage} />                <Passage currentPassage={this.state.currentPassage}/>            </div>        );    }

通过将自己的state的currentPassage属性传递给子元素的一个属性，也就是props对象，来告诉子元素加载某个模块。

class Passage extends React.Component {    constructor (props) {        super(props);        this.state = {            passage: ""        }    }//子元素通过自己的this.props对象来进行访问，可以直接得到父元素传递的消息    componentWillReceiveProps (nextProps) {        let passageName = nextProps.currentPassage;        passageName = passageName.toLowerCase().replace(" ", "");        $.ajax({            url: "../resources/data/" + passageName + ".json",            success: (data) => {                this.setState({                    passage: data.passageContent                });            }        });    }    render() {        return (            <article>                <p>                    {this.state.passage}                </p>            </article>        );    }}

兄弟元素之间

上面的两个部分组合起来刚好就完成了兄弟元素之前的通信，其中一个子元素通过调用父元素传递过来的函数this.props.refreshCurrentPassage来修改父元素状态，然后在父元素状态修改之后，另外一个子元素的this.props会发生变化，从而触发重新渲染。这里需要注意的是React组件的声明周期，父元素到子元素通信由于可能需要多次渲染，所以使用了声明周期中的componentWillReceiveProps阶段来进行内容加载。在官方文档中是这么介绍这个阶段的：

Invoked when a component is receiving new props. This method is not called for the initial render.

也就是在一个组件接收了新的属性（props）触发的，这个方法不会在初始化渲染的时候触发。并且这个阶段还可以访问修改前的props对象。