React组件通信

最新推荐文章于 2024-07-15 23:28:46 发布
最新推荐文章于 2024-07-15 23:28:46 发布
阅读量447 收藏 4
点赞数
文章标签： react.js javascript 前端 前端框架 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52148548/article/details/125287315
版权

目录

组件通信的意义

组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state)
组件化开发的过程中，完整的功能会拆分为多个组件，在这个过程中不可避免的需要互相传递一些数据
为了能让组件之间可以进行相互沟通，数据传递，这个过程就是组件通信

分类：

  1. 父子关系（最重要）
  2. 兄弟关系（自定义事件模式产生技术方法eventBus/通过共同的父组件通信）
  3. 其他关系（mobx/redux/基于hook的方案)

父传子

在这里插入图片描述

实现步骤：

  1. 父组件提供要传输的数据state
  2. 给子组件标签添加属性,值为state中的数据
  3. 子组件通过props接收父组件传过来的数据
    1. 类组件通过this.props获取props对象
    2. 函数式组件直接通过参数获取props对象

举例：

子组件获取父组件的数据：

import React from 'react';

//App父组件 Son子组件

//函数式组件的Son
function SonF(props){
    //props是一个对象 里边存着父组件传入的所有数据
    return(
        <div>我是函数子组件，{props.msg}</div>
    )
}

//类组件的Son
class SonC extends React.Component{
    render(){
        //类组件必须通过this关键词来获取，这里的props是固定的
        return(
            <div>我是类子组件{this.props.msg}</div>
        )
    }
}

//父组件
class App extends React.Component{
    //准备数据
    state = {
        message:'this is message'
    }
    render(){
        return(
            <div>
                {/* 在子组件身上绑定属性 属性名可以自定义 保持语义化 */}
                <SonF msg={this.state.message} />
                <SonC msg={this.state.message}/>
            </div>
        )
    }
}
export default App;

结果如图：
在这里插入图片描述

对props进行说明

  1. props是只读对象（readonly）

根据单向数据流（单向往下传，不能修改）的要求，子组件只能读取props中的数据，不能进行修改。

this.props.msg = 'new msg' //这是不可以的 不可以直接修改
  1. props可以传递任意数据

数字，字符串，布尔值，数组，对象，函数，JSX（一块模板）

举例：

import React from 'react';

//函数式组件的Son
function Son(props){
    console.log(props)
    //props是一个对象 里边存着父组件传入的所有数据
    return(
        <div>
            {/* 传递数组 */}
            {props.list.map(item =><p key={item}>{item}</p>)}
            {/* 传递对象 */}
            {props.userInfo.name}
            {/* 传递字符串 */}
            {props.messaeg}
            {/* 传递函数 点击按钮执行父组件传递的函数*/}
            <button onClick={props.getMessage}>触发父组件传入的函数</button>
            {/* 传递JSX */}
            {props.child}
        </div>

    )
}


//父组件
class App extends React.Component{
    //准备数据
    state = {
        list:[1,2,3],
        userInfo:{
            name:'hh',
            age:'30'
        },
        message:'this is message',
    }
    getMessage=()=>{
        console.log('父组件里的函数')
    }
    render(){
        return(
            <div>
                {/* 在子组件身上绑定属性 属性名可以自定义 保持语义化 */}
                <Son 
                    // 数组
                    list={this.state.list}
                    // 对象
                    userInfo = {this.state.userInfo} 
                    // 字符串
                    messaeg = {this.state.message}
                    // 函数
                    getMessage = {this.getMessage}
                    // JSX(传过去的是React的一个element对象)
                    child = {<span>this is span</span>}
                />
            </div>
        )
    }
}
export default App;

浏览器显示：
在这里插入图片描述
控制台显示：
在这里插入图片描述

props的解构赋值

对props进行解构赋值，会使写法更加简洁

写法一：

//函数式组件的Son
function Son(props){
 
    //对props解构赋值
    const {list,userInfo,message,getMessage,child} = props
        
	//对props进行解构赋值后，子组件接受数据时可以不用写props，用如下方式替代
	
         <div>
            传递数组
            {list.map(item =><p key={item}>{item}</p>)}
            {/* 传递对象 */}
            {userInfo.name}
            {/* 传递字符串 */}
            {message}
            {/* 传递函数 点击按钮执行父组件传递的函数*/}
            <button onClick={getMessage}>触发父组件传入的函数</button>
            {/* 传递JSX */}
            {child}
        </div>
        

    )
}

写法二：

//函数式组件的Son
 //对props解构赋值，直接在传参的时候解构
 //这里写的就是原生函数语法 props也是一个普通的js对象，所以原生支持的写法 这里都是可以的 放心大胆写
function Son({list,userInfo,message,getMessage,child}){
	//对props进行解构赋值后，子组件接受数据时可以不用写props，用如下方式替代
         <div>
            传递数组
            {list.map(item =><p key={item}>{item}</p>)}
            {/* 传递对象 */}
            {userInfo.name}
            {/* 传递字符串 */}
            {message}
            {/* 传递函数 点击按钮执行父组件传递的函数*/}
            <button onClick={getMessage}>触发父组件传入的函数</button>
            {/* 传递JSX */}
            {child}
        </div>        
    )
}

效果还和以前一样但是写法简洁了

子传父

子传父，实质上是子组件调用父组件传递过来的函数，将要传递给父组件的数字据作为函数的实参传入。

举例：

import React from 'react';

//App父组件 Son子组件
//父传子 props 函数

//子传父：子传父实质上是子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参传入即可
function Son(props){
    //对props进行解构赋值
    const {getSonMsg} = props;

    return (
        <div>this is Son<button onClick = {()=>{getSonMsg('这是来自于子组件的数据')}}>click</button></div>
    )
}

//父组件
class App extends React.Component{
    //准备数据
    state = {
        list : [1,2,3]
    }
    // 1.准备一个函数 传给子组件 SonMsg为要传的实参
    getSonMsg = (SonMsg)=>{
        console.log(SonMsg)
    }
    render () {
        return (
            <div>
                <Son getSonMsg = {this.getSonMsg}/>
            </div>
        )
    }
}  

export default App;

点击按钮，控制台打印出子组件传递给父组件的数据
在这里插入图片描述
上述子组件还可以这么写，代码如下：

function Son(props){
    //对props进行解构赋值
    const {getSonMsg} = props;
    
    function clickHander (){
        getSonMsg('这是来自子组件的数据')
    }

    return (
        <div>this is Son
            <button onClick = {clickHander}>click</button>
        </div>
    )
}

将getSonMsg('这是来自于子组件的数据')单独拎出来写成一个独立的函数，然后再调用，可以保持模板的精简整洁。

兄弟组件传参

在这里插入图片描述
通过状态提升机制，利用共同的父组件实现兄弟通信。

举例：

import React from "react";

//App父组件 SonA SonB为子组件

// 目标：将B组件中的数据传给A
// 方案：
// 1.先把B中的数据通过子传父 传给App
// 2.再把App接收到的Son中的数据 通过父传子 传给A

function SonA(props) {
  const {sendAMsg} = props
  return (
    <div>
        this is A,{sendAMsg}
    </div>
  )
}
function SonB(props) {
  const { getBMsg } = props;
  const BMsg = "这里是来自于B组件的数据";
  return (
    <div>
      this is B<button onClick={() => getBMsg(BMsg)}>B给父发数据</button>
    </div>
  );
}
//父组件
class App extends React.Component {
    //声明一个传给A组件的数据
    state = {
        sendAMsg:'测试这里是否会变成父给A传来的数据'
    }
  //声明一个得到B组件数据的方法
  getBMsg = (msg) => {
    console.log(msg);
    //把msg数据交给sendAMsg
    this.setState({ 
        sendAMsg: msg
    })
  };
  render() {
    return (
      <div>
        <SonA sendAMsg ={this.state.sendAMsg}/>
        <SonB getBMsg={this.getBMsg} />
      </div>
    );
  }
}
export default App;

点击按钮前：
在这里插入图片描述
点击按钮后：
在这里插入图片描述

跨组件通信Context

即跨层传递，Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传输的方法

在这里插入图片描述
实现步骤：

  1. 创建Context对象 导出 Provider 和 Consumer 对象
const {Provider,Consumer} = createContext()
  1. 使用Provider包裹根组件提供数据
<Provider value = {this.state.message}>
	{/*根组件*/}
</Provider>
  1. 需要用到数据的组件使用Consumber包裹获取数据
<Consumer>
	{value => /*基于 context 值进行渲染 */}
</Consumer>

举例：

import React, { createContext } from "react";

//App父组件 SonA SonB为子组件

//App -> A -> C
//App数据 -> C (跨过A传数据)

// 注意事项：1.上层组件和下层组件关系是相对的只要存在就可以使用 通常我们都会通过App作为数据提供方
// 2.这里涉及到的语法不是固定的，有两处，提供的位置 value提供数据 获取的位置{value=> 使用value做什么都可以}

//1.导入CreateContext()方法并执行,解构提供者和消费者
const { Provider, Consumer } = createContext();
function ComA() {
  return (
    <div>
      this is ComA
      <ComC />
    </div>
  );
}
function ComC() {
  return( 
    <div>
      this is ComC
      {/* 3. 通过Comsumer使用数据 */}
      <Consumer>
          {value=><span>{value}</span>}
      </Consumer>
    </div>
    )
}

//父组件
class App extends React.Component {
    // 准备数据
  state = {
    message: "this is message",
  };
  render() {
    return (
        // 2.使用provider包裹根标签
      <Provider value={this.state.message}>
        <div>
          <ComA />
        </div>
      </Provider>
    );
  }
}

export default App;

结果如图：

C组件后显示了this is message ，说明传递成功

在这里插入图片描述

练习

需求：
在这里插入图片描述

App组件提供数据，ListItem负责渲染数据，点击ListItem中的删除按钮，会删除相应的数据。

代码：

import React from "react";

//渲染列表
function ListItem({ item , delItem }) {
  return (
    <>
      <h3>{item.name}</h3>
      <p>{item.price}</p>
      <p>{item.info}</p>
      <button onClick={() => delItem(item.id)}>删除</button>
    </>
  );
}

//数据提供者 渲染ListItem组件 App-ListItem
//先不抽离组件 完成基础渲染后再去抽离
class App extends React.Component {
  state = {
    list: [
      { id: "1", name: "超级好吃的棒棒糖", price: 18.8, info: "开业大酬宾" },
      { id: "2", name: "超级好吃的大鸡腿", price: 34.2, info: "开业大酬宾" },
      { id: "3", name: "超级好吃的冰激凌", price: 14.2, info: "开业大酬宾" },
    ],
  }

  //给子组件传递的函数
  delItem = (id) => {
    this.setState({
        //filter函数 保留item.id !== id为true的item
        list: this.state.list.filter(item => item.id !== id)
    })
  }

  render() {
    return (
      <>
        {this.state.list.map((item) => (
          <ListItem item={item} key={item.id} delItem = {this.delItem}/>
        ))}
      </>
    );
  }
}

export default App;

结果：

点击删除会删除相对应的内容

在这里插入图片描述

甜甜酷盖
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React组件通信解决方案.docx
10-26
React 组件通信解决方案 在 React 开发中，组件之间的通信是一个非常重要的问题。在这个解决方案中，我们将探索一种不借助 Redux 等第三方库的方法来实现组件之间的通信。 首先，让我们来了解一下组件之间的通信的...
8种React组件间通信方式（类组件+函数组件）
Lin_DOUbleP的博客
08-23 3391
本次分享就到这了~笔者为初学者，欢迎各位评论区交流。
10种React组件之间通信的方法
jialiang808的博客
06-16 2795
10种React组件之间通信的方法。父子组件之间的通信、兄弟组件之间的通信以及无关联的组件之间的通信。
React组件三大类：类组件、函数组件、高阶组件
最新发布
你若盛开，清风自来
07-15 1168
本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。
React 组件通讯
m0_62118859的博客
04-26 1993
目录 1. 组件通讯-概念 1.组件的特点 2.知道组件通讯意义 总结： 2. 组件通讯-props 基本使用 1.传递数据和接收数据的过程 2.函数组件使用 props 3.类组件使用 props 总结： 3. 组件通讯-props 注意事项 1.知道什么是单向数据流？ 2.props 可以传递什么数据？任意 总结： 4. 组件通讯-父传子方式 1.父组件提供要传递的 state 数据 2.给子组件标签添加属性，值为 state 中的数据 3.子组件中通过 p...
react——组件通信
m0_55173487的博客
02-02 1132
组件通信分为父子组件之间的通信和非父子之间的通信 ，在父子组件通信中用到的是父传子（传递数据），字传父（传递方法），类组件多了个this，函数组件则不需要this。非父子组件通信，跨域的比较大，组件层级嵌套比较多，因此相对来说会比较复杂，但是也有方式来实现：状态提升（中间人模式，前提是必须是亲兄弟，关系复杂后不适用），发布订阅者模式（实际开发中用redux），context状态树传参（官方方法）
react组件通信
qq_43806488的博客
04-29 325
react组件通信 为什么要组件通信 组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state） 组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据 为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信 组件通信的形式 父子关系 - 最重要的 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信 其它关系 - redux / 基于hook的方案 父传子 父组件提供要传递的数据 - stat
React 组件间的通信示例
08-27
React 组件间的通信示例 React 组件间的通信是指在 React 应用程序中，各个组件之间的数据交换和事件传递。这种通信机制是 React 应用程序的核心，它使得组件之间能够相互协作，实现复杂的业务逻辑。 React 组件...
react开发教程之React 组件之间的通信方式
12-10
在React中，组件通信主要有以下几种方式： 1. **父子组件通信**：这是最基本的通信方式，通过props传递数据。父组件可以通过props向子组件传递数据，子组件则通过`this.props`来访问这些数据。在组件设计时，为了...
关于react中组件通信的几种方式详解
08-28
React 组件通信方式详解 React 中组件通信是指在 React 应用程序中，不同的组件之间如何交换数据和协作的过程。 React 官方推荐使用单向数据流的方式来实现组件通信，即父组件向子组件传递数据，而子组件不能直接...
React 父子组件通信的实现方法
10-15
在React中，组件间的通信是...这种设计有助于保持组件的独立性和可重用性，是React组件化开发的核心之一。在实际应用中，除了直接的props传递，还可以使用`context API`、`Redux`等工具来实现更复杂的跨层级组件通信。
react中组件通信
A_fork的博客
03-31 964
今天我们来说一下react中的组件通信流程。 react中组件通信流程分为父传子、子传父、非父子之间传值。
React组件间通信（常用方式，简单易用）
高大志leo的博客
10-27 4519
React知识中一个主要内容便是组件之间的通信，以下列举几种常用的组件通信方式，结合实例，通俗易懂，建议收藏。 一、父子组件通信 原理：父组件通过props（与vue中的props区分开）向子组件通信，子组件通过回调事件与父组件通信。 首先，先创建一个父组件Parent.js跟子组件Children.js，二者的关系为直接父子关系。 Parent.js父组件如下，给父组件一个默认状态state，引入子组件，通过在子组件加上toChildren={this.state.msg}，该处即为向子组件传..
React组件之间的8种通讯方式
m0_68271787的博客
01-05 640
在上述代码中，点击子组件中的 div 元素之后，在浏览器的控制台可以看到输出了这个 div 元素。如果两个需要通讯的组件，它们拥有共同的父级组件，我们可以使用上述的策略组合，只是需要使用父级组件作为沟通的媒介，把数据作为父组件的 state 和方法来定义。Flux是必须的吗？在父组件中可以用 refs 引用子组件，之后就可以调用子组件的实例方法了。最简单的方式是在父组件中传递一个函数给子组件，子组件可以使用这个函数来把数据传给它的父组件。当你想在父组件中捕获来自子组件中的 DOM 事件时，可以采用此方法。
【React】React组件通信（详解）
aDiaoYa_的博客
07-15 3614
目前我们所学习到的Vue、React都是组件化开发，在这些项目中，一个页面会被拆分成很多组件，组件之间层层嵌套形成所谓的“祖组件”、“父组件”和“子组件”，而这些组件之间往往需要数据信息传递，即组件通信。下文内容，是我在学习react的过程中总结的几种通信方法： 1、props父子组件通信 2、Context跨组件通信 3、消息订阅与发布 4、redux与react-redux集中式管理
React组件之间如何通信？
Aan___的博客
08-18 145
通过创建一个 Context 对象，并使用 Provider 组件在上层组件中提供数据，子组件可以使用 Consumer 组件或 useContext 钩子访问上下文中的数据。Props传递：通过将数据或回调函数以属性(props)的形式传递给子组件，实现父组件向子组件通信的方式。子组件可以通过 props 访问父组件传递的数据或触发父组件提供的回调函数。父子组件实例引用：父组件可以通过Ref来获取子组件的引用，从而直接调用子组件的方法或访问子组件的属性。这种方式常用于访问子组件的公共方法或数据。
react学习笔记(4)
mhc20201554114的博客
07-23 320
this.state是纯js对象，在vue中,data属性是利用object.defimeProperty处理过的，更改data的数据的时候会触发数据的getter和setter,但是React中没有做这样的处理，如果直接更改的话，react是无法得知的，所以，需要使用特殊的更改状态的方法setstate.状态就是组件描述某种显示情况的数据，由组件自己设置和更改，也就是说由组件自己维护，使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)6.属性可以修改子组件的值，状态不可以。...
React 组件通信的五种方式_props_ref_Context_Redux
热门推荐
蒲公英芽的博客
04-25 1万+
前言 React 中组件间的通信有以下几种情况： 父组件向子组件通信，可以通过 props 方式传递数据；也可以通过 ref 方式传递数据； 子组件向父组件通信，通过回调函数方式传递数据； 父组件向后代所有组件传递数据，如果组件层级过多，通过 props 的方式传递数据很繁琐，可以通过 Context.Provider 的方式； 一个数据源实现跨组件通信，通过指定 contextType 的方式...
react 组件通信
07-27
React组件通信可以通过props属性进行传递数据。子组件可以通过props接收父组件传递的数据，并进行相应的操作。在函数式组件中，可以直接通过props对象来获取父组件传递的数据。在类组件中，需要使用this.props来获取父组件传递的数据。\[1\] 另外，子组件也可以通过调用父组件传递过来的函数来实现子传父的通信。子组件可以将需要传递的数据作为函数的实参传入，并在子组件内部调用该函数。这样就可以将子组件的数据传递给父组件进行处理。\[3\] 总结起来，React组件通信可以通过props属性进行父传子和子传父的数据传递和操作。父组件通过props将数据传递给子组件，子组件通过props接收父组件传递的数据。子组件可以通过调用父组件传递的函数来将子组件的数据传递给父组件进行处理。\[1\]\[3\] #### 引用[.reference_title] - *1* *3* [React组件通信](https://blog.csdn.net/weixin_52148548/article/details/125287315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [react组件通信](https://blog.csdn.net/weixin_39818813/article/details/125737028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值