React组件间通信

1.父组件->子组件

父组件向子组件通信是通过在子组件中定义属性实现的，然后子组件可以使用this.props拿到父组件的方法或者参数。例如：

父组件

import React from 'react';import ButtonTest from './ButtonTest.js'export default class RuleDemo3 extends React.Component{    constructor(props){        super(props)        this.state = {value:"defaultState",enable:false}    }    handleClick(){        this.setState({value:"newValue",enable:false})    }    handleChange(event){        this.setState({value:event.target.value})    }    render(){        return (            <div>                <input type="text" value={this.state.value}                       onChange={this.handleChange.bind(this)}                       readOnly={this.state.enable}/>                <ButtonTest buttonText="点我呀" ref="buttonTest"                            handleClick={this.handleClick.bind(this)}/>            </div>        )    }}

子组件

import React from 'react';export default class ButtonTest extends React.Component{    handleClick(){        this.props.handleClick();    }    render(){        return (            <button onClick={this.handleClick.bind(this)}>{this.props.buttonText}</button>        )    }}

上例中：父组件向子组件传递了一个参数buttonText，传递了一个事件handleClick。子组件通过this.props获取到了父组件传的内容。并且在按钮点击的时候回调了父组件的handleClick方法。

2.子组件->父组件

子组件可以直接在调用父组件的方法时，将需要传递的值当作参数，传递给父组件。

例如，我们将上例的handleClick做一下修改。

父组件

handleClick(newValue){        this.setState({value:newValue,enable:false})}

子组件

handleClick(){        this.props.handleClick("this is newValue");}

点击按钮的时候，文本框的值就变成了“this is newValue”。

3.父组件调用子组件的方法

父组件调用子组件的方法通过ref来实现。

首先在父组件中定义子组件的ref属性,之后就可以直接通过this.refs.属性名.子组件方法来访问了。

this.refs.buttonTest.handleClick()

4.兄弟组件通信

首先需要明确一点，兄弟组件之间是不存在关联的，所以不能直接通信，兄弟组件的关联在于相同的父组件，所以需要进行兄弟组件之间通信的话，那么就需要在父组件中实现兄弟组件的变更操作。

例如：

父组件

import React from 'react';import HolloTest from './HolloTest.js';import ContentTest from './ContentTest.js';import RuleDemo1 from "./RuleDemo1";import RuleDemo2 from "./RuleDemo2";import RuleDemo3 from "./RuleDemo3";export default class DemoApp extends React.Component{    constructor(props){        super(props)        this.state = {            inputValue1:"I'm input one",            inputValue2:"I'm input two"        }    }    brothercommunication(index){        if(index == 0){//第一个按钮            this.setState({inputValue2:"兄弟，我支配你"})        }else{//第二个按钮            this.setState({inputValue1:"兄弟，你归我管"})        }    }    render(){        return (            <div>                <HolloTest/>                <ContentTest/>                <RuleDemo1 name="test">                    <h1>my is child one</h1>                    <h1>my is child two</h1>                </RuleDemo1>                <RuleDemo2 brothercommunication={this.brothercommunication.bind(this)} inputValue={this.state.inputValue1}/>                <RuleDemo3 brothercommunication={this.brothercommunication.bind(this)} inputValue={this.state.inputValue2}/>            </div>        )    }}

子组件RuleDemo2

import React from 'react';export default class RuleDemo2 extends React.Component{    constructor(props){        super(props)        this.state = {enable:false}    }    componentDidMount(){//组件生命周期        this.setState({enable:true})    }    handleClick(){        this.setState({enable:false})        this.props.brothercommunication(0);    }    handleChange(event){        this.setState({value:event.target.value})    }    static defaultProps = {        autoPlay: false,        maxLoops: 10,    };    render(){        return (            <div>                <input type="text" value={this.props.inputValue}                       onChange={this.handleChange.bind(this)}                       readOnly={this.state.enable}/>                <button onClick={this.handleClick.bind(this)}>点我啊</button>                <div>{this.props.maxLoops}</div>            </div>        )    }}

子组件RuleDemo3

import React from 'react';import ButtonTest from './ButtonTest.js'export default class RuleDemo3 extends React.Component{    constructor(props){        super(props)        this.state = {value:"defaultState",enable:false}    }    handleClick(newValue){        this.setState({enable:false})        this.props.brothercommunication(1);    }    handleChange(event){        this.setState({value:event.target.value})    }    render(){        return (            <div>                <input type="text" value={this.props.inputValue}                       onChange={this.handleChange.bind(this)}                       readOnly={this.state.enable}/>                <ButtonTest handleClick={this.handleClick.bind(this)}/>            </div>        )    }}

孙子组件ButtonTest

import React from 'react';export default class ButtonTest extends React.Component{    constructor(porps){        super(porps)        this.state = {            buttonText:"点我呀"        }    }    handleClick(){        this.props.handleClick("this is newValue")    }    render(){        return (            <button onClick={this.handleClick.bind(this)}>{this.state.buttonText}</button>        )    }}

实现的效果是点击第一个按钮，改变第二个按钮所在的组件的输入值，点击第二个按钮，改变第一个按钮所在组件的输入值。

效果图：