快捷導(dǎo)航

React 父子組件通信的實(shí)現(xiàn)方法

更新時(shí)間：2019年12月05日 10:48:35 作者：無(wú)跡落花

這篇文章主要介紹了React 父子組件通信的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

通訊是單向的，數(shù)據(jù)必須是由一方傳到另一方。

1.父組件與子組件間的通信。

在 React 中，父組件可以向子組件通過(guò)傳 props 的方式，向子組件進(jìn)行通訊。

父組件 App.js

import React, { Component } from 'react';

import './App.css';

import Child from './child'

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      msg:'父類(lèi)的消息',
      name:'John',
      age:99
    }
  }

  callback=(msg,name,age)=>{
    // setState方法,修改msg的值,值是由child里面?zhèn)鬟^(guò)來(lái)的
    this.setState({msg});
    this.setState({name});
    this.setState({age});
  }

 render() {
  return (
   <div className="App">
    <p> Message: &nbsp;&nbsp;{this.state.msg}</p>
    <Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>
   </div>
  );
 }
}

export default App;

父組件中，state里面有三個(gè)屬性，分別是msg，name和age，在子組件child中，如果想拿到父組件里面的屬性，就需要通過(guò)props傳遞。

在 <Child></Child> 標(biāo)簽里面添加

name={this.state.name} age={this.state.age}

寫(xiě)成

<Child name={this.state.name} age={this.state.age}></Child>

name和age分別是你要傳遞的屬性。

子組件 Child

import React from "react";

class Child extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:'Andy',
      age:31,
      msg:"來(lái)自子類(lèi)的消息"
    }
  }

  change=()=>{
    this.props.callback(this.state.msg,this.state.name,this.state.age);
  }

  render(){
    return(
      <div>
        <div>{this.props.name}</div>
        <div>{this.props.age}</div>
        <button onClick={this.change}>點(diǎn)擊</button>
      </div>
    )
  }
}

export default Child;

在子組件中,通過(guò) {this.props.name} {this.props.age}就能拿到父組件里面的數(shù)據(jù)。

呈現(xiàn)在頁(yè)面上的就是這個(gè)樣子。

其中 John,99均來(lái)自于父組件App.js

2.子組件向父組件通信

子組件向父組件通訊，同樣也需要父組件向子組件傳遞 props 進(jìn)行通訊，只是父組件傳遞的，是作用域?yàn)楦附M件自身的函數(shù)，子組件調(diào)用該函數(shù)，將子組件想要傳遞的信息，作為參數(shù)，傳遞到父組件的作用域中。

上面例子中，在子組件Child中綁定了onClick事件。調(diào)用this.change方法。

注意change函數(shù)采用了箭頭函數(shù)的寫(xiě)法 change=()=>{}，目的是為了改變this的指向。使得在函數(shù)單獨(dú)調(diào)用的時(shí)候，函數(shù)內(nèi)部的this依然指向child組件

如果不使用箭頭函數(shù)，而是采用普通的寫(xiě)法

change(){
}

則需要在 constructor中綁定this,

this.change=this.change.bind(this)

或者在onClick方法中綁定this,

onClick={this.change=this.change.bind(this)}

在change方法中，通過(guò)props發(fā)送出去一個(gè)方法，比如說(shuō)叫callback方法，父組件中去接收這個(gè)方法，callback={this.callback}，然后在自身的callback函數(shù)中進(jìn)行一些列操作。

本例中，函數(shù)callback中就是通過(guò)調(diào)用 setState方法來(lái)改變值。

點(diǎn)擊按鈕后頁(yè)面顯示:

可以看到，我們既實(shí)現(xiàn)了通過(guò)props將父組件里面的數(shù)據(jù)傳遞給子組件的效果，也實(shí)現(xiàn)了通過(guò)子組件按鈕點(diǎn)擊事件，將子組件里面的數(shù)據(jù)發(fā)送給父組件

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React 父子組件通信的實(shí)現(xiàn)方法

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具