一、父元件向子元件傳值

父元件通過屬性的方式向子元件傳值，子元件通過函式回撥的方式向父元件傳值。

案例一： 父元件：

<PageTitle title="測試頁面標題" />

子元件：

<div>{this.props.title}</div>

注：父元件中的 title 和子元件中的 this.props.title 對應，props表示接收從父元件傳過來的值。

案例二： 父元件：

<List list={this.state.list} />

子元件：

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;">{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }
}
 

二、子元件向父元件傳值

父元件：

//接收從子元件傳回來的值
GetItemHandle(item) {
	console.log(item);
}
render() {
        return (
            <div>
                <List list={this.state.list} GetItemHandle={this.GetItemHandle.bind(this)}/>
            </div>
        );
    }

子元件：

render() {
        let listBody = this.props.list.map((item, index) => {
            return (
                <div className="item" key={index}>
                    <a href="JavaScript:;" onClick={(e) => {this.props.GetItemHandle(item)}}>{item.title}</a>
                </div>
            );
        });
        return (
            <div className="box">
                {listBody}
            </div>
        );
    }
 

說明：子元件中使用 this.props.GetItemHandle 呼叫父元件的方法，並把引數傳到父元件，其中GetItemHandle 與父元件中的方法對應。