父?jìng)髯?/h1>
就是父組件傳遞值給子組件牌柄，這個(gè)一般用props就可以完成
例如：
render() {
return(
<div>
<h1>Simple TODO List</h1>
<AppendList appendList={ this.state.list }/>
</div>
)
}
console.log(this.props.appendList)
通過(guò)以上方法即可訪問(wèn)。
子傳父
問(wèn)題引入
現(xiàn)在我們需要實(shí)現(xiàn)一個(gè)功能歧蕉，添加一個(gè)輸入框的內(nèi)容到一個(gè)list列表中灾部，效果如下：
我們把功能劃分為三個(gè)組件，一個(gè)是添加功能append惯退，也就是輸入框和按鈕赌髓，另一個(gè)是顯示組件appendList，顯示list的內(nèi)容，還有一個(gè)是包含兩種組件的父組件暫且取名為appendFather锁蠕。
- 首先我們編輯添加功能append:
import React from "react"
export default class Append extends React.Component{
constructor(props){
super(props);
}
render() {
return(
<div>
<input type="text" />
<button value="添加" >添加</button>
</div>
)
}
}
- 隨后我們?cè)倬庉嬃斜斫M件appendList:
import React from "react"
export default class AppendList extends React.Component{
render() {
return(
<ul>
<li></li>
</ul>
)
}
}
- 最后夷野，我們需要在父組件存儲(chǔ)list中的一些數(shù)據(jù)，以及將這兩個(gè)子組件包含起來(lái)匿沛。
import React from "react"
import AppendList from "./appendList"
import Append from "./append"
export default class AppendFather extends React.Component{
constructor(props){
super(props);
// 存儲(chǔ)所需要的初始數(shù)據(jù)
this.state={
list:["蘋(píng)果","梨子","香蕉"]
}
}
render() {
return(
<div>
<h1>Simple TODO List</h1>
<Append />
<AppendList }/>
</div>
)
}
}
現(xiàn)在我們的頁(yè)面中還只是有一個(gè)輸入框和按鈕扫责，數(shù)據(jù)并沒(méi)有被渲染出來(lái)，我們需要將數(shù)據(jù)傳遞給AppendList這個(gè)組件(父?jìng)髯?逃呼，這里我們可以用到props鳖孤。
- 在父組件中添加(或者說(shuō)是修改)這樣的代碼：
<AppendList appendList={ this.state.list }/>
- 將我們的list數(shù)據(jù)傳遞給
AppendList,然后在AppendList中，我們需要接收數(shù)據(jù)抡笼。
this.props.appendList
- 但是我們的數(shù)據(jù)需要渲染成一個(gè)列表苏揣，所以用map來(lái)渲染。
import React from "react"
export default class AppendList extends React.Component{
render() {
return(
<ul>
{
this.props.appendList.map((data,index) => <li key={ index }>{ data }</li>)
}
</ul>
)
}
}
處理完了顯示的組件推姻，我們來(lái)接著處理添加的功能平匈。
基于狀態(tài)在哪個(gè)組件，更新?tīng)顟B(tài)的行為就在那個(gè)組件的原則藏古，我們需要先在appendFather中定義一個(gè)方法來(lái)添加數(shù)據(jù)：
addList(todo){
const {list} = this.state;
list.unshift(todo);
// 更新?tīng)顟B(tài)
this.setState({list});
}
這里的todo參數(shù)是我們一會(huì)兒要在append組件中傳入的數(shù)據(jù)
注意我們需要在constructor中對(duì)這個(gè)方法的this進(jìn)行綁定以免出錯(cuò)增炭。
constructor(props){
super(props);
this.state={
list:["蘋(píng)果","梨子","香蕉"]
}
this.addList=this.addList.bind(this);
}
現(xiàn)在，我們的父組件已經(jīng)定義好了一個(gè)添加數(shù)據(jù)的方法拧晕，下面我們需要交給子組件來(lái)操作隙姿。
既然普通數(shù)據(jù)可以通過(guò)props傳遞，那么我們的函數(shù)也可以通過(guò)props傳遞,而且函數(shù)傳遞的值只是一個(gè)對(duì)內(nèi)存的引用厂捞。
現(xiàn)在我們?cè)诟附M件傳遞這個(gè)函數(shù)：
render() {
return(
<div>
<h1>Simple TODO List</h1>
<Append addList={this.addList}/>
<AppendList appendList={ this.state.list }/>
</div>
)
}
現(xiàn)在输玷，我們可以在append中接收這個(gè)函數(shù)了，但是首先我同樣需要給append中的添加按鈕加上一個(gè)處理事件：
import React from "react"
export default class Append extends React.Component{
constructor(props){
super(props);
this.handleAdd = this.handleAdd.bind(this);
}
handleAdd(){
const todo= this.todoInput.value.trim();
this.props.addList(todo);
this.todoInput.value="";
}
render() {
return(
<div>
<input type="text" ref={input => this.todoInput=input}/>
<button value="添加" onClick={this.handleAdd}>添加</button>
</div>
)
}
}
在上面的代碼中靡馁，主要有以下幾點(diǎn)：
- 添加一個(gè)
handleAdd的處理事件 - 在處理事件中欲鹏，通過(guò)
ref={input => this.todoInput=input}對(duì)input的值進(jìn)行綁定 - 通過(guò)
this.handleAdd = this.handleAdd.bind(this);綁定自定義事件的this - 通過(guò)
this.props.addList(todo);調(diào)用父組件傳來(lái)的函數(shù)
以上就是整個(gè)小功能的全部過(guò)程
消息的訂閱、發(fā)布（組件通信）
相當(dāng)于綁定監(jiān)聽(tīng)臭墨、觸發(fā)事件赔嚎。
使用PubSubJs庫(kù)
npm install pubsub-js
總結(jié)
以上代碼，子傳父最關(guān)鍵的就是父組件通過(guò)props傳了一個(gè)函數(shù)給子組件胧弛，并在子組件中調(diào)用這個(gè)函數(shù)尤误。
全部代碼
appendFather.js
import React from "react"
import AppendList from "./appendList"
import Append from "./append"
export default class AppendFather extends React.Component{
constructor(props){
super(props);
this.state={
list:["蘋(píng)果","梨子","香蕉"]
}
this.addList=this.addList.bind(this);
}
addList(todo){
const {list} = this.state;
list.unshift(todo);
// 更新?tīng)顟B(tài)
this.setState({list});
}
render() {
return(
<div>
<h1>Simple TODO List</h1>
<Append addList={this.addList}/>
<AppendList appendList={ this.state.list }/>
</div>
)
}
}
append.js
import React from "react"
export default class Append extends React.Component{
constructor(props){
super(props);
this.handleAdd = this.handleAdd.bind(this);
}
handleAdd(){
const todo= this.todoInput.value.trim();
this.props.addList(todo);
this.todoInput.value="";
}
render() {
return(
<div>
<input type="text" ref={input => this.todoInput=input}/>
<button value="添加" onClick={this.handleAdd}>添加</button>
</div>
)
}
}
appendList.js
import React from "react"
export default class AppendList extends React.Component{
render() {
return(
<ul>
{
this.props.appendList.map((data,index) => <li key={ index }>{ data }</li>)
}
</ul>
)
}
}
