在經歷了許多的html+css+js的傳統網頁製作之後，最近開始上手react了。學了一點語法之後就開始了react的專案，
然而事情不總是一帆風順的。剛上手的時候，專案的進度就是一團糟。各種迷之bug紛至沓來，在這裡真的要提醒諸位，在寫react es6語法的時候，html結構中的dom事件千萬要注意大小寫，比如html結構中的onclick事件，這個在html頁面中是這樣寫的，然而在es6裡面就只能用onClick了，否則會影響元件的生成。
好了，話不多說，我們進入正題。
react相鄰元件間是怎麼通訊的？大家應該都知道react在生成元件以後只有setState方法能引起元件重新渲染，然而在相鄰元件之間，同級元件是不可能影響到另一個元件的setState方法的。也就是說，如果我要實現qq登入（安卓端）的效果（修改賬號同時修改頭像），就目前來看是不可能的。
為此，react給我們提供了一個方法：

//子元件1
//頭像url預設為user.png,只要輸入了uid，則獲取當前使用者的頭像url，並更新這個元件
export class UserAvatar extends Component{
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log(this
 
.props.imageurl);
        console.log("avatar init")
    }
     //下面接收父元件傳遞過來的State引數
     render() {
        return (
            <div className="avatar-wrapper">
              <img src={this.props.imageurl} alt="頭像" />
            </div>
        )
    }
}


//子元件2
export class Login extends
 
 Component{
    constructor(props){
        super(props);
    }

    componentDidMount(){
        console.log(this.props.changeAva);
        console.log("login init");
    }
//下面接收改變狀態的函式方法
    render(){
        return(
            <div className="login-wrapper">
                <div className="text-input-wrapper">
                   <img src={account_icon} alt="account"/>
                    <input type="text" className="text-input" maxlength="10" onBlur={this.props.changeAva.bind(this)}/>
                </div>

                <div className="text-input-wrapper">
                    <img src={password_icon} alt="password"/>
                    <input type="text" className="text-input" maxlength="10"/>
                </div>

                <div className="button-wrapper">
                    <input type="button" value="登入" onClick={this.onLogin.bind(this)}/>
                </div>

                <div className="forget-password-wrapper"><a href="#!">忘記密碼?</a></div>
            </div>
        )
    }
     onLogin(){
        alert("申請授權中，請耐心等待");
    }
}


//父元件
export class LoginAvatar extends Component{

    constructor(){
        super();
        this.state={
            imageUrl:"../../resource/images/avatar/user.png"
        };
    }
//改變狀態的方法在父元件中定義
    changeAvatar(){
        this.setState({
            imageUrl:"../../resource/images/avatar/1262283870/avatar.jpg"
        })
    }

    render(){
        return(
            <div className="main-login-wrapper">
                 <UserAvatar imageurl={this.state.imageUrl}/>
                 <Login  changeAva={this.changeAvatar.bind(this)}/>
            </div>
        )
    }
}

簡單來說，就是父元件呼叫子元件時，給子元件傳遞相應的引數，一個用於顯示，一個使用者重新渲染。這就是所謂的狀態提升，也因此我們能實現元件間的通訊。

個人理解，如若有誤，還請不吝賜教。