這篇文章主要介紹React如何實現(xiàn)父子組件通信，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的瑪曲網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

父子組件通信

原理：父組件通過props（與vue中的props區(qū)分開）向子組件通信，子組件通過回調(diào)事件與父組件通信。

首先，先創(chuàng)建一個父組件Parent.js跟子組件Children.js，二者的關(guān)系為直接父子關(guān)系。

Parent.js父組件如下，給父組件一個默認狀態(tài)state，引入子組件，通過在子組件加上toChildren={this.state.msg}，該處即為向子組件傳props。

import React from 'react';
import { Button } from 'element-react';
import Children from './Children';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:'父組件傳遞給子組件'
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(){
    this.setState({
      msg:'父組件傳遞給子組件（改變之后的內(nèi)容）'
    })
  }
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>父子組件通信實例</p>
        <Button onClick={this.changeMsg}>父傳子</Button>
        <Children toChildren={this.state.msg}></Children>
      </div>
    )
  }
}
 
export default Parent

Children.js子組件如下，初始狀態(tài)通過props拿到父組件傳過來的值。

import React from 'react';
 
class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren   //通過props拿到父組件傳過來的值
	};
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>從父組件傳過來：</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
      </div>
    )
  }
}
 
export default Children

注意：子組件取值時應(yīng)與父組件放在子組件的字段props一致，即本例中的 toChildren，如下

 那么子組件想向父組件傳值（向上傳值），可以通過調(diào)用父組件傳過來的回調(diào)函數(shù)

在Parent.js中向Children.js中加入回調(diào)函數(shù)callback，綁定changeMsg方法

import React from 'react';
import Children from './Children';
 
class Parent extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
	    msg:'父組件傳遞給子組件',
        fromChildrn:''
	};
    this.changeMsg = this.changeMsg.bind(this)
  }
  changeMsg(val){
    this.setState({
      fromChildrn: val
    })
  }
  render(){
    return (
      <div style={{backgroundColor:'#f7ba2a',padding:'20px',width:'500px',margin:'auto',textAlign:'center'}}>
        <p>父子組件通信實例</p>
        <span style={{color:'red'}}>{this.state.fromChildrn}</span>
        <Children toChildren={this.state.msg} callback={this.changeMsg}></Children>
      </div>
    )
  }
}
 
export default Parent

在子組件中，用this.props.callback()執(zhí)行父組件的回調(diào)函數(shù)，從而執(zhí)行綁定方法changeMsg，顯示子組件傳過來的值

import React from 'react';
import { Button } from 'element-react';
 
class Children extends React.Component {
  constructor(props) {
	super(props);
	this.state = {
		msg:this.props.toChildren
	};
    this.toParent = this.toParent.bind(this)
  }
  toParent(){
    this.props.callback('子組件傳過來的值')   //子組件通過此觸發(fā)父組件的回調(diào)方法
  }
  render(){
    return (
      <div style={{backgroundColor:'#13ce66',padding:'10px',width:'200px',margin:'auto',marginTop:'20px'}}>
        <p>從父組件傳過來：</p>
        <span style={{color:'blue'}}>{this.state.msg}</span>
        <Button onClick={this.toParent}>子傳父</Button>
      </div>
    )
  }
}
 
export default Children

注意：props中的回調(diào)函數(shù)名稱需一致，即本例中的callback，如下

以上是“React如何實現(xiàn)父子組件通信”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：React如何實現(xiàn)父子組件通信
網(wǎng)頁鏈接：http://vcdvsql.cn/article0/pdiooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、外貿(mào)建站、域名注冊、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)