使用React如何实现父子组件通信

这期内容当中小编将会给大家带来有关使用React如何实现父子组件通信,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联主要从事网站建设、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务吉利,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

1.父组件与子组件间的通信。

在 React 中,父组件可以向子组件通过传 props 的方式,向子组件进行通讯。

父组件 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:'父类的消息',
      name:'John',
      age:99
    }
  }

  callback=(msg,name,age)=>{
    // setState方法,修改msg的值,值是由child里面传过来的
    this.setState({msg});
    this.setState({name});
    this.setState({age});
  }

 render() {
  return (
   
    

 Message:   {this.state.msg}

        
  );  } } export default App;

父组件中,state里面有三个属性,分别是msg,name和age,在子组件child中,如果想拿到父组件里面的属性,就需要通过props传递。

标签里面添加

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

写成

name和age分别是你要传递的属性。

子组件   Child

import React from "react";

class Child extends React.Component{
  constructor(props){
    super(props);
    this.state={
      name:'Andy',
      age:31,
      msg:"来自子类的消息"
    }
  }

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

  render(){
    return(
      
        
{this.props.name}
        
{this.props.age}
        点击       
    )   } } export default Child;

在子组件中,通过 {this.props.name}  {this.props.age}就能拿到父组件里面的数据。

使用React如何实现父子组件通信

呈现在页面上的就是这个样子。

其中 John,99均来自于父组件App.js

2.子组件向父组件通信

子组件向父组件通讯,同样也需要父组件向子组件传递 props 进行通讯,只是父组件传递的,是作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父组件的作用域中。

上面例子中,在子组件Child中绑定了onClick事件。 调用this.change方法。

注意change函数采用了箭头函数的写法 change=()=>{},目的是为了改变this的指向。使得在函数单独调用的时候,函数内部的this依然指向child组件

如果不使用箭头函数,而是采用普通的写法

change(){
}

则需要在 constructor中绑定this,

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

或者在onClick方法中绑定this,

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

在change方法中,通过props发送出去一个方法,比如说叫callback方法,父组件中去接收这个方法,callback={this.callback},然后在自身的callback函数中进行一些列操作。

上述就是小编为大家分享的使用React如何实现父子组件通信了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


新闻标题:使用React如何实现父子组件通信
文章URL:http://scyanting.com/article/pciicc.html

其他资讯