React間父子元件通訊，非常簡單，如果你有點基礎，基本上是一看就明白了
本文為系列文章首發於我的部落格：https://www.fakin.cn

1、父子元件通訊

如果你會vue，那麼你就應該知道，vue是通過props給子元件傳遞引數進行通訊。而React也是通過props傳遞的，但是更加的簡單和容易理解！
父元件：

import List from '../../common/list/list'
//···
render(){
return(
<div className="article">
     { this.props.list.map((item,
 
 index) => {
          return <List article={item} key={index} index={index}
                   deleteItem={this.handleListDelete.bind(this)} />
          })
      }
</div>
)
}

在render的List元件中，和自定義屬性一樣article={item}即可
子元件：

render() {
   return (
            <div className="article-list"
 
>
                <Link to={this.props.isSearch ? {
                    pathname: this.props.article.url,
                } : `/detail/${this.props.article.id}`}
                      target='_blank'>
                    <div className="article-content">
                        <h3 className=
 
"article-title">
                            {this.props.article.title}
                        </h3>
                    </div>
                </Link>
            </div>
   )
}

子元件直接this.props.xxxx(其中xxxx為你在父元件中給子元件傳遞的article={item})
然後在子元件中的props中就會有一個article物件

2、子父元件通訊

子父元件通訊是，通過子元件呼叫父元件的方法，傳遞引數進行通訊的。也很簡單!

import List from '../../common/list/list'//引用子元件
//···
async handleListDelete(index) {
        //index來自子元件的this.props.index
        let list = [...this.props.list];
        this.props.delNewsList(index);
        if (list.length === 1) {
            this.props._isLoading(true);
            await this.props.loadMoreList()
            this.props._isLoading(false);

        }
}
render(){
return(
<div className="article">
     { this.props.list.map((item, index) => {
          return <List article={item} key={index} index={index}
                   deleteItem={this.handleListDelete.bind(this)} />
          })
      }
</div>
)
}

和上面一樣，但是這次重點是在deleteItem={this.handleListDelete.bind(this)},這裡把父元件的方法```this.handleListDelete````傳遞過去了。

子元件：

class children extends Component {
    handleDelete() {
        this.props.deleteItem(this.props.index)
    }
}

因為父元件是通過deleteItem={this.handleListDelete.bind(this)}把方法傳遞給子元件的，所以子元件中this.props.deleteItem()這個方法對映的就是父元件的方法。
這樣我們就可以在子元件中呼叫父元件的handleListDelete方法，然後進行傳參，父元件就可以獲得引數了！