【React】关于组件之间的通讯

🌟组件化：把一个项目拆成一个一个的组件，为了便与开发与维护
组件之间互相独立且封闭，一般而言，每个组件只能使用自己的数据（组件状态私有）。
如果组件之间相互传参怎么办？ 那么就要考虑组件之间的通讯。

props基本使用

props能够实现传递数据和接受数据。

作用：接收其他组件传递的数据

传递：给组件标签添加属性，就表示给组件传递数据

接收：分为函数组件和类组件

  • 函数组件：通过参数props
  • 类组件：通过this.props

函数式组件使用props

// 函数组件通过props获取
function Hi(props) {
  return <div>{props.name}</div>
}

...
...
const VNode = (
  <div>
  
    <Hi name={'Tricia'}></Hi>
  </div>
)

类组件使用this.props

// class 组件需要通过 this.props 来获取
class Hello extends Component {
  render() {
    return <div>接收到的数据:{this.props.age}</div>
  }
}
...
...
const VNode = (
  <div>
    <Hello name="jack" age={19} />
  </div>
)

在这里插入图片描述

注意点：

  1. props只能读取对象中的属性，但是无法修改。
  2. 单向数据流： 数据从父组件流向子组件，即父组件的数据修改时，子组件也跟着修改
  3. 子组件的数据不能传递给父组件
  4. 🌟传递字符串时可以直接传递，传递其他数据类型时需要加 {}

组件通讯

父传子

将父组件的数据传递给子组件,数据是单向流，子组件中是只读的！

步骤：

  1. 父组件提供要传递的state数据
  2. 给子组件标签添加属性，值为state中的数据
  3. 子组件中通过props接收父组件传递过来的数据
  • 父组件
// 定义一个父组件
class Father extends React.Component {
  // 父组件在state中提供数据
  state = {
    fName: '朗道',
  }
  render() {
    return (
      <>
        <div>
          <p>father</p>
          {/* 父组件数据通过子组件标签传递给子组件 */}
          <Son fName={this.state.fName}></Son>
        </div>
      </>
    )
  }
}

  • 子组件中通过 this.props.属性名 接收父组件中传递的数据

    import { Component } from 'react'
class Son extends Component {
  render() {
    return (
      <>
        {/* 子组件通过this.props接收父组件传过来的数据并渲染 */}
        <p>Son ： {this.props.fName}</p>
      </>
    )
  }
}
export default Son

注意：

父传子也可以在内容里面传，用JSX。子组件接受时使用 this.props.children

import React, { Component } from 'react'
import ReactDom from 'react-dom'

class AppSon extends Component {
  render() {
    console.log(this.props)
    return (
      <>
        <h2>我是App的儿子</h2>
        <div>
          {this.props.name}
          {this.props.age}
          {/* 用children来接受 */}
          {this.props.children}
        </div>
      </>
    )
  }
}
class App extends Component {
  render() {
    return (
      <>
        <h1>我是App</h1>
        <AppSon name={'停云'} age={18098}>
          {/* 父传子也可以在此处传递 */}
          {<p>hi,我是内容</p>}
        </AppSon>
      </>
    )
  }
}
ReactDom.createRoot(document.querySelector('#root')).render(<App></App>)

在这里插入图片描述

子传父

步骤

  1. 父组件提供一个回调函数，将该函数作为属性的值，传递给子组件。
  2. 子组件通过props调用回调函数
  3. 将子组件的数据作为参数传递给回调函数。
import React, { Component } from 'react'
import ReactDom from 'react-dom/client'

// 子传父本质是父组件传递给子组件一个方法，子组件通过调这个方法来向父组件传参。
class AppSon extends Component {
  render() {
    return (
      <>
        <h2>我是App的儿子</h2>
        <span>{this.props.name}</span>
        <button onClick={() => this.props.editName(this.props.name)}>
          点击执行父组件的方法
        </button>
      </>
    )
  }
}
class App extends Component {
  state = {
    name: '冷面小青龙',
  }
  editName = (val) => {
    console.log(val)
    this.setState({
      name: val === '丹恒' ? '冷面小青龙' : '丹恒',
    })
  }
  render() {
    return (
      <>
        <h1>我是App</h1>
        <AppSon name={this.state.name} editName={this.editName}></AppSon>
      </>
    )
  }
}
ReactDom.createRoot(document.querySelector('#root')).render(<App></App>)

注意

回调函数不能用普通函数，因为this指向的问题，如果是普通函数那么谁调用this就指向谁。这个函数是被this.props调用的，所以this指向的是父组件传递过去的参数

class App extends Component {
  state = {
    name: '冷面小青龙',
  }
   editName() {
    // 错误写法
    // 注意⚠️：这里不能用普通函数，因为this指向的问题，如果是普通函数那么谁调用this就指向谁。这个函数是被this.props调用的，所以this指向的是父组件传递过去的参数
    console.log(this)
  } 
  render() {
    return (
      <>
        <h1>我是App</h1>
        <AppSon name={this.state.name} editName={this.editName}></AppSon>
      </>
    )
  }
}

兄弟组件通讯(状态提升)

核心思想：状态提升

公共父组件职责：

  1. 提供共享状态
  2. 提供操作共享状态的方法

要互相通讯的两个子组件只需通过props接受或者操作状态。说白了就是。父传子 + 子传父

步骤：

在这里插入图片描述

  1. Son1通过子传父，将自己要传递的state给公共父组件
  2. Son2通过父传子得到这个state
import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import Son1 from './Son1'
import Son2 from './Son2'
export default class App extends Component {
  state = {
    num: '123',
  }
  editNum = (n) => {
    this.setState({
      num: +this.state.num + n,
    })
  }
  render() {
    return (
      <>
        <div>App</div>
        {/* 通过子传父改变num值 */}
        <Son1 editNum={this.editNum}></Son1>
        {/* 父传子得到Son1的num 值 */}
        <Son2 num={this.state.num}></Son2>
      </>
    )
  }
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App></App>)

跨级组件通讯 - context

context: 上下文，可以理解为是一个范围，在这个范围内的所有组件都可以跨级通讯。

步骤

  1. 引入createContext方法，拿到Provider和Consumer
  2. 将createContext方法提出来，提供Provider, Consumer这两个组件并导出
  3. 使用Provider组件包裹整个应用，通过value属性提供要共享的数据。
  4. 通过Consumer组件接收共享的数据

在这里插入图片描述

  • context.jsx

    // 公共组件：提供Provider, Consumer这两个组件

// 1. 导入createcontext方法
import { createContext } from 'react'
// 2. 调用方法得到两个组件 Provider, Consumer
const Context = createContext()
export default Context

  • index.js

    • 提供共享的数据和方法
    • 如果要修改状态，也是将方法写在value中，最后由需要组件去调用。
    import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import GrandPa from './GrandPa'

import Context from './Context/context'
const { Provider } = Context

export default class App extends Component {
  state = {
    num: '云浮将军景元元',
    age: 109776,
  }
  render() {
    return (
      // 使用Provider组件包裹根组件，并要提供value
      // 若要提供多个属性，可以写成对象格式
      <Provider value={{ name: this.state.num, age: this.state.age }}>
        <div>
          <h1>App</h1>
          <GrandPa></GrandPa>
        </div>
      </Provider>
    )
  }
}

ReactDOM.createRoot(document.querySelector('#root')).render(<App></App>)

  • 在任意一个组件中均可使用共享的数据，例如Father.jsx

    import React, { Component } from 'react'
import Son from './Son'
import Context from './Context/context'
const { Consumer } = Context
export default class Father extends Component {
  render() {
    return (
      <Consumer>
        {/* 接收state  需要将DOM放入插值中，并用箭头函数返回 */}
        {(obj) => (
          <div style={{ border: '2px solid #333', margin: '10px' }}>
            Father -- {obj.name}
            <Son></Son>
          </div>
        )}
      </Consumer>
    )
  }
}

  • 在Son.jsx组件中去修改状态

import React, { Component } from 'react'
import Context from './Context/context'
const { Consumer } = Context
export default class Son extends Component {
  render() {
    return (
      <Consumer>
        {(obj) => (
          <div style={{ border: '2px solid #333', margin: '10px' }}>
            Son -- {obj.age}岁
            <button onClick={() => obj.editAge(5)}>增加➕</button>
          </div>
        )}
      </Consumer>
    )
  }
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/57299.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

高电压功放的优点有哪些呢（高压放大器）

高电压功放的优点有哪些呢（高压放大器）

高电压功放是电子设备中的一种特殊类型的功率放大器&#xff0c;具有独特的优点&#xff0c;被广泛应用于各种领域。高电压功放可以将低电压信号放大到较高的电压水平&#xff0c;实现对大功率负载的驱动。下面我们来看看一下高电压功率放大器的优点。 1.宽电压范围 高电压功放…
阅读更多...
Unity通过代码切换材质

Unity通过代码切换材质

效果展示 代码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class MaterialSwitcher : MonoBehaviour {public Material newMaterial; // 新材质private Material oldMaterial; // 旧材质private Renderer renderer; // 渲染器组件…
阅读更多...
浅谈React中的ref和useRef

浅谈React中的ref和useRef

目录 什么是useRef&#xff1f; 使用 ref 访问 DOM 元素 Ref和useRef之间的区别 Ref和useRef的使用案例 善用工具 结论 在各种 JavaScript 库和框架中&#xff0c;React 因其开发人员友好性和支持性而得到认可。 大多数开发人员发现 React 非常舒适且可扩展&#xff0c;…
阅读更多...
【NLP】训练chatglm2的评价指标BLEU，ROUGE

【NLP】训练chatglm2的评价指标BLEU，ROUGE

当进行一定程度的微调后&#xff0c;要评价模型输出的语句的准确性。由于衡量的对象是一个个的自然语言文本&#xff0c;所以通常会选择自然语言处理领域的相关评价指标。这些指标原先都是用来度量机器翻译结果质量的&#xff0c;并且被证明可以很好的反映待评测语句的准确性&a…
阅读更多...
[回馈]ASP.NET Core MVC开发实战之商城系统(五)

[回馈]ASP.NET Core MVC开发实战之商城系统(五)

经过一段时间的准备&#xff0c;新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始&#xff0c;在之前的文章中&#xff0c;讲解了商城系统的整体功能设计&#xff0c;页面布局设计&#xff0c;环境搭建&#xff0c;系统配置&#xff0c;及首页【商品类型&#xff0c;ba…
阅读更多...
Vue2 第十八节 插槽

Vue2 第十八节 插槽

1.默认插槽 2.具名插槽 3.作用域插槽 插槽 ① 作用&#xff1a;让父组件可以向子组件指定位置插入html结构&#xff0c;也是一种组件间通信的方式&#xff0c;适用于父组件和子组件间通信 ② 分类&#xff1a;默认插槽&#xff0c;具名插槽&#xff0c;作用域插槽 一.默认…
阅读更多...
【黑马头条之redis实现延迟任务】

【黑马头条之redis实现延迟任务】

本笔记内容为黑马头条项目的延迟任务精准发布文章部分 目录 一、实现思路 二、延迟任务服务实现 1、搭建heima-leadnews-schedule模块 2、数据库准备 3、安装redis 4、项目集成redis 5、添加任务 6、取消任务 7、消费任务 8、未来数据定时刷新 1.reids key值匹配 …
阅读更多...
【有趣的设计模式】23 种设计模式详解和场景分析

【有趣的设计模式】23 种设计模式详解和场景分析

前言 七大设计原则 1、单一原则&#xff1a;一个类只负责一个职责 2、开闭原则&#xff1a;对修改关闭&#xff0c;对扩展开放 3、里氏替换原则&#xff1a;不要破坏继承关系 4、接口隔离原则&#xff1a;暴露最小接口&#xff0c;避免接口过于臃肿 5、依赖倒置原则&#xff1…
阅读更多...
黑客学习笔记（网络安全）

黑客学习笔记（网络安全）

一、首先&#xff0c;什么是黑客&#xff1f; 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手&#xff0c;现阶段黑客所需要掌握的远远不止这些。 以前是完全涉及黑灰产业的反派角色&#xff0c;现在大体指精通各种网络技术的程序人员 二、为什么要学习黑客技术&#xff1f;…
阅读更多...
怎么把图片变成表格？几个步骤轻松转换

怎么把图片变成表格？几个步骤轻松转换

如果您需要将一张图片中的数据转换成表格&#xff0c;这里有几个简单的步骤&#xff0c;可以帮助您完成这个转换过程。以下是需要注意的事项。 首先&#xff0c;我们先了解OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术。然后合理运用…
阅读更多...
真的不想知道如何进行语音翻译才简单吗

真的不想知道如何进行语音翻译才简单吗

郑希&#xff1a;嘿&#xff0c;王浩&#xff01;我听说你最近去了日本旅游&#xff0c;怎么样&#xff1f;体验如何&#xff1f; 王浩&#xff1a;哈哈&#xff0c;太棒了&#xff01;日本真是一个充满魅力的国家。不过&#xff0c;要说令我惊喜的还是语音翻译技术&#xff0…
阅读更多...
论文阅读 - Social bot detection in the age of ChatGPT: Challenges and opportunities

论文阅读 - Social bot detection in the age of ChatGPT: Challenges and opportunities

论文链接&#xff1a;https://www.researchgate.net/publication/371661341_Social_bot_detection_in_the_age_of_ChatGPT_Challenges_and_opportunities 目录 摘要&#xff1a; 引言 1.1. Background on social bots and their role in society 1.2. The rise of AI-gene…
阅读更多...
深度学习各层负责什么内容？

深度学习各层负责什么内容？

1、深度学习——神经网络简介 深度学习(Deep Learning)(也称为深度结构学习【Deep Structured Learning】、层次学习【Hierarchical Learning】或者是深度机器学习【Deep Machine Learning】)是一类算法集合&#xff0c;是机器学习的一个分支。 深度学习方法近年来&#xff0c…
阅读更多...
微信小程序使用 canvas 2d 实现签字板组件

微信小程序使用 canvas 2d 实现签字板组件

本文是在微信小程序中使用 canvas 2d 来实现签字板功能&#xff1b; 效果图&#xff1a; 代码&#xff1a; 1、wxml <view><canvas id"canvas"type"2d"bindtouchstart"start"bindtouchmove"move"bindtouchend"end&qu…
阅读更多...
一文带你了解TCP/IP模型以及封装和分用

一文带你了解TCP/IP模型以及封装和分用

文章目录 1. 网络协议2. OSI七层网络模型3.TCP/IP (五层/四层)4. 封装和分用 1. 网络协议 网络协议是计算机网络中用于规定数据在网络中传输和处理的规则&#xff0c;它定义了在网络中通信的格式、规范和顺序。网络协议可以分为不同的层次&#xff0c;每个层次负责不同的功能和…
阅读更多...
linux大神Brendan Gregg 性能之巅 第二版（systems performance）阅读心得（第一章）

linux大神Brendan Gregg 性能之巅 第二版（systems performance）阅读心得（第一章）

笔者从事某副省级市政务云系统运维7年&#xff0c;最近被下面这张图吸引开始阅读Brendan Gregg的《性能之巅 第二版》&#xff0c;下面将结合自己的运维经验一起来看看这本700多页的书。 1、绪论 1.1 系统性能 系统性能的影响因素涉及软件和硬件&#xff0c;CPU、内存、磁盘io…
阅读更多...
opencv 30 -图像平滑处理01-均值滤波 cv2.blur()

opencv 30 -图像平滑处理01-均值滤波 cv2.blur()

什么是图像平滑处理? 图像平滑处理&#xff08;Image Smoothing&#xff09;是一种图像处理技术&#xff0c;旨在减少图像中的噪声、去除细节并平滑图像的过渡部分。这种处理常用于预处理图像&#xff0c;以便在后续图像处理任务中获得更好的结果。 常用的图像平滑处理方法包括…
阅读更多...
Redis的订阅者和发布者模式、主从双备和密码认证

Redis的订阅者和发布者模式、主从双备和密码认证

四、Redis的订阅者和发布者模式、主从双备和密码认证 1、Redis的订阅者和发布者模式 两个数据库&#xff0c;一个是10&#xff0c;一个是15。订阅频道&#xff1a; 向频道推数据&#xff1a; 接收到数据&#xff1a; 2、redis的高可用&#xff08;HA&#xff09;主从双备 模拟…
阅读更多...
idea application.yml配置文件没有提示或读不到配置

idea application.yml配置文件没有提示或读不到配置

1.首先确定你的resources文件夹正常且yml文件图表和下面一样 不一样的右键去设置 2.确保你已经缩进了且层级关系正常 3.如果以上都不是&#xff0c;先考虑删除.idea重开试试 4.以上解决不了就装以下两个插件解决
阅读更多...
vue - 【完整源码】实现评论区发表评论、回复评论、评论盖楼等功能，前端PC网站/移动端H5实现多用户评论与回复功能（详细示例源码，一键复制开箱即用）

vue - 【完整源码】实现评论区发表评论、回复评论、评论盖楼等功能，前端PC网站/移动端H5实现多用户评论与回复功能（详细示例源码，一键复制开箱即用）

效果图 在vue项目开发中，实现一个类似社交软件的评论区发表留言及回复等评论功能效果，可以无限回复盖楼。 一、功
阅读更多...
最新文章

Copyright @ 2022~2023