react 组件之间的通信(父子组件)

这篇具有很好参考价值的文章主要介绍了react 组件之间的通信(父子组件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、父子组件

React中 组件内调用其他组件不需要进行 类似于vue 声明组件(components)

React 组件内调用其他组件 直接将组件导入 放置在对应的JSX 代码中

父子组件通信(传统):

1、父组件->子组件  通过属性传递

2、子组件->父组件  父组件通过将自身的函数对象传递给子组件, 子组件执行父组件传递的函数来修改/传值操作

练习一:

Father:

import { Component } from 'react'

import Son from './Son';

class Father extends Component {

  /* constructor(props){
    super(props);

    this.state = {
      person: {
        name: '张三',
        age: 200
      }
    }
  }
 */
  state = {
    person: {
      name: '张三',
      age: 200
    },

    arr: [1,2,3]
  }

  render() {
    return (
      <div className='container'>
        <h1>Father组件:</h1>
        <ul>
          {
            this.state.arr.map( item => (
              <li key={item}>{item}</li>
            ) )
          }
        </ul>

        <hr/>

        {/* 
          通过 自定义属性 vperson 将 this.state.person 传递给 Son
        
          const vadd = (e, item) => this.handleAddArray(e.vitem);

          vadd(event, 1000)
        */}
        <Son vperson={this.state.person} varr={this.state.arr} vhandle={this.handleAge.bind(this)} vadd={ (e, vitem) => this.handleAddArray(e, vitem)}/>
      </div>
    )
  }


  handleAge(){

    this.setState({
      person: {...this.state.person, age: this.state.person.age +1 }
    });
  }

  handleAddArray(e, item){
    console.log('子组件调用父组件 handleAddArray..........');
    // 向 arr 中末尾追加新元素
    this.state.arr.push(item);

    this.setState({
      arr: this.state.arr
    });

  }
}

export default Father;

Son:

import { Component } from 'react'

class Son extends Component {

  /* 
  子组件 通过constructor 函数中的props 形参 接受 父组件 传递的所有属性

  注: 子组件内不允许修改/更新 父组件所传递的 props
  */
  constructor(props){
    super(props);

    console.log('Son props=>', props);

  }

  render() {
    const {  vperson  } = this.props;
    return (
      <div>
        <h1 className="h1">Son</h1>
        <h3 className='h3'>
        {/*   {this.props.vperson.name}
          {this.props.varr} */}
  
          {vperson.name} --- {vperson.age}
        </h3>
        <button className="btn btn-primary" onClick={this.add.bind(this)}>增加年龄</button>

        <button className="btn btn-success" onClick={this.localadd.bind(this)}>增加arr数组元素</button>

      </div>
    )
  }

  add(){
    // 调用父组件传递的 handleAge 函数
    this.props.vhandle();
  }

  localadd(e){
    this.props.vadd(e, new Date().getTime());
  }
}

export default Son;

练习二:

Father:

import { Component } from 'react'

import Son from './Son';

class Father extends Component {

  state = {
    tabs : [
      {
        tid: '001',
        title: '我的',
        isActive: true
      },
      {
        tid: '002',
        title: '收藏',
        isActive: false
      },
      {
        tid: '003',
        title: '设置',
        isActive: false
      }
    ]
  }

  render() {
    const {tabs} = this.state;
    return (
      <div className="container">
        <h1>Father组件</h1>
        <hr/>
        <Son tabsProps={tabs}  changeItem={ selectedId => this.changeItem(selectedId) }/>
      </div>
    )
  }

  changeItem(selectedID){
    console.log('子组件调用父组件 changeItem 获取tab id=>', selectedID);

    // 根据 selectedID 值 匹配 this.tabs 数组中的元素 如果匹配修改isActive=true 如果不匹配 isActive=false

    this.state.tabs.forEach( item => {
      if(item.tid === selectedID) item.isActive = true;
      else item.isActive = false;
    } )

    this.setState({
      tabs: this.state.tabs
    });
  }
}

export default Father

Son:

import { Component } from 'react'

/* 
子组件接受 props 可以省略 constructor函数接受props , 直接通过 this.props获取父组件传递的属性值
*/
class Son extends Component {
  render() {
    return (
      <div>
        <h1 className="h1">Son组件</h1>

        <div className="d-flex flex-column">
          <div className="btns fs-3 text-center  w-50 d-flex justify-content-around">
           {/*  <div className="w-25 bg-danger">我的</div>
            <div className="w-25">收藏</div>
            <div className="w-25">设置</div> */}

            {
              this.props.tabsProps.map( tab => (
                <div className={'w-25 '+(tab.isActive ? 'bg-danger': '')} key={tab.tid} onClick={this.selecteItem.bind(this, tab.tid)}>{tab.title}</div>
              ) )
            }
          </div>
          <div className="content">
            {
              this.props.tabsProps.find( tab => tab.isActive ).title
            }
          </div>
        </div>
      </div>
    )
  }

  selecteItem(selectedID){
    console.log('选择tab id=>', selectedID);
    this.props.changeItem(selectedID);
  }
}

export default Son

练习三:

props 数据类型校验 写法有两种:

1、在当前的类中定义 一个静态变量  static propTypes(该变量名称不允许随意修改)

2、在当前的类之外 定义一个静态变量  类名.propTypes(该变量名称不允许随意修改)

Father:

import { Component } from 'react';

import Son from './Son'

/* 
props 数据类型检测
*/

class Father extends Component {

  state = {
    num: 100,
    msg: 'Hello',
    arr: [],
    isFlag: true
  }
  render() {
    const { num ,msg, arr, isFlag } = this.state;
    return (
      <div>
        <h1>Father:</h1>
        <hr/>
        <Son pnum={num} pmsg={msg}  pisFlag={isFlag}/>
      </div>
    )
  }
}

export default Father

Son:

import React, { Component } from 'react';

import FatherPropTypes from 'prop-types';


class Son extends Component {

  /* static propTypes = {
    pnum: FatherPropTypes.number, //数据类型 number
    pmsg: FatherPropTypes.string,
    parr: FatherPropTypes.array.isRequired, //必填属性
    pisFlag: FatherPropTypes.bool
  } */

  render() {
    const {pnum, pmsg, parr, pisFlag} = this.props;
    return (
      <div>
        <h1>Son:</h1>
        <h6>pnum:{pnum}</h6>
        <h6>pmsg:{pmsg}</h6>
        <h6>parr:{parr}</h6>
        <h6>pisFlag:{pisFlag}</h6>
      </div>
    )
  }
}

Son.propTypes = {
  pnum: FatherPropTypes.number, //数据类型 number
  pmsg: FatherPropTypes.string,
  parr: FatherPropTypes.array.isRequired, //必填属性
  pisFlag: FatherPropTypes.bool
}


export default Son;

练习四:

props 默认值设置 写法有两种:

1、在当前的类中定义 一个静态变量  static defaultProps(该变量名称不允许随意修改)

2、在当前的类之外 定义一个静态变量  类名.defaultProps(该变量名称不允许随意修改)

什么时候调用默认值:

1、传递的prop 原本的值为 undefined 则调用 默认值

2、没有传递 prop 则调用 默认值文章来源地址https://www.toymoban.com/news/detail-715505.html

Father:

import { Component } from 'react';

import Son from './Son'

/* 
props 默认值设置
*/

class Father extends Component {

  state = {
    num: undefined,
    msg: undefined,
    arr: undefined,
    isFlag: undefined
  }
  render() {
    const { num ,msg, arr, isFlag } = this.state;
    return (
      <div>
        <h1>Father:</h1>
        <hr/>
        <Son pnum={num} pmsg={msg} parr={arr} pisFlag={isFlag}/>
      </div>
    )
  }
}

export default Father

Son:

import React, { Component } from 'react';



class Son extends Component {

  /* static defaultProps = {
    pnum: -1,    //FatherPropTypes.number, //数据类型 number
    pmsg: '没有文字',//FatherPropTypes.string,
    parr:  [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填属性
    pisFlag: false
  } */

  render() {
    const {pnum, pmsg, parr, pisFlag} = this.props;
    return (
      <div>
        <h1>Son:</h1>
        <h6>pnum:{pnum}</h6>
        <h6>pmsg:{pmsg}</h6>
        <h6>parr:{parr}</h6>
        <h6>pisFlag:{pisFlag}</h6>
      </div>
    )
  }
}

Son.defaultProps = {
  pnum: -1,    //FatherPropTypes.number, //数据类型 number
    pmsg: '没有文字',//FatherPropTypes.string,
    parr:  [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填属性
    pisFlag: false
}


export default Son;

Son1:

import PropTypes from 'prop-types'
import { Component } from 'react'

/* 
props 进行类型检测与默认值设置
*/

class Son1 extends Component {
  static propTypes = {}

  static defaultProps = {}

  render() {
    return (
      <div>Son1</div>
    )
  }
}

export default Son1

到了这里,关于react 组件之间的通信(父子组件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序-父子组件之间的通信

    父子组件之间通信的3种方式: 属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据 子组件在properties节点中声明对应的属性并使用。代码: 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 事件绑定用于实现子向父传值,可以传递任意类型

    2024年02月03日
    浏览(58)
  • react父子组件通信

    父传子:最常见 把父组件中的数据传给子组件 子传父:子组件调用父组件传递过来的参数,并且把想要传递的数据当成函数的实参传入即可 【子组件通过调用父组件传递到子组件的方法向父组件传递数据】 对于子传父中子组件还是先调用了父组件传递过来的参数,之后再向

    2024年02月07日
    浏览(40)
  • 微信小程序父子组件之间通信的 3 种方式

    父子组件之间通信的 3 种方式 ① 属性绑定 ⚫ 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 ② 事件绑定 ⚫ 用于子组件向父组件传递数据,可以传递任意数据 ③ 获取组件实例 ⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象,这样就可以直

    2024年02月09日
    浏览(44)
  • 【react从入门到精通】React父子组件通信方式详解(有示例)

    【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用讯飞星火大模型1分钟写一个精美的PPT】 在上一篇文章《JSX详解》中我们了解了什么是jsx以及jsx的语法规则。 本文中我们将详细了解React父子组件通信方式

    2024年02月05日
    浏览(92)
  • 前端vue中父子组件之间的传值(修改值)和事件的相互调用

    目录 父组件向子组件传值 子组件修改父组件中的值: 方法1 方法2 子组件调用父组件里的函数 方法1 方法2 父组件调用子组件的函数 : 子组件中的 data 属性是用来存储子组件自身的数据,而不是用来接收父组件传递的数据的。父组件向子组件传递数据的常用方式是通过 pro

    2024年02月07日
    浏览(53)
  • React组件之间通信

    1-1、安装 1-2、使用 A组件 B组件 1-3、总结

    2024年02月16日
    浏览(41)
  • 前端基础(props emit slot 父子组件间通信)

    前言 :如何实现组件的灵活使用,今天学习组件封装用到的props、slot和emit。 目录 props 子组件 父组件 示例代码 slot 示例代码 作用域插槽 emit 示例代码 需要实现在其他组件中使用同一个子组件。 子组件(所谓子组件,就是封装好的组件,供其他组件使用) 子组件定义了so

    2024年02月11日
    浏览(48)
  • React中组件之间如何通信?

    我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是 vue 中最强大的功能之一,同样组件化是 React 的核心思想 相比 vue , React 的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息

    2024年02月04日
    浏览(51)
  • React中消息订阅与发布(PubSubJS)——两个组件之间通信

    结合案例:github搜索案例 结果如下图 1.父容器代码 2.搜索Search子模块代码(发布消息) 3.展示Lisi子模块代码(订阅消息) 发布订阅分析 在Search子模块中发布消息,用PubSub.publish中进行发布消息,在List子模块中订阅消息,拿到数据进行展示 使用步骤 工具库: PubSubJS 下载: npm instal

    2024年02月09日
    浏览(43)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包