React之全局组件通信 useContent

于 2024-07-05 10:41:44 发布
阅读量209 收藏 2
点赞数 8
分类专栏： 手撸React 文章标签： react.js 前端 前端框架 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heiioworld_/article/details/140200679
版权

思路：

1.创建一个createContent对象
2.使用useContent钩子函数接收createContent对象
3.将状态和设置状态的函数通过Content提供给所有子组件

新增

4.父组件传值给子组件（相当于是自定义组件）在下面这个例子中，父组件向子组件传递的是“父亲组件测试”，子组件向父组件传递的是“小张” ，父组件向子组件传递的是onchangeContent事件，子组件向父组件传递的prop是name

下面是具体事件演示

1.创建一个createContent对象
在这里插入图片描述
2.将useContent重命名为useContentContext暴露出去
在这里插入图片描述
3.父组件
在这里插入图片描述
4.子组件
在这里插入图片描述

效果演示

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

floret. 小花
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react:useContent
qq_36413371的博客
12-22 706
在 https://ant.design/components/button-cn 打开一个codeSanbox， 替换下面的代码保存。useContent 用来简化代码。
(转)React——useContext使用
CaseyWei
03-25 1万+
一、什么是useContext 在Hooks出来之前，开发者都是使用的class组件，通过props传值。现在使用方法组件（Function）开发了，没有constructor构造函数也就没有了props的接收，所以父子组件的传值就成了一个问题。React Hooks就为我们准备了useContext来解决这个问题。 二、useContext的作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。 这里要注意的是，很多同学觉得可以使用useContext结合useR
React（三）useReducer、useContext钩子的使用，redux库的初步使用
最新发布
DogEgg_001的博客
05-20 961
useContext是一个用于读取和订阅组件中的context的 Hook当组件嵌套过深又需要传递数据时，一层一层的传props是不现实的，Context允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。这样就需要useContext，在顶层组件创建context，将context标签包裹住需要传值的子组件，这样嵌套在里面的组件就可以获取到这个context的值了本篇文章介绍了useReducer，useContext以及rudux的简单应用。
react:usecontext使用
qq_36413371的博客
03-03 530
【代码】react:usecontext使用。
react之useConntext——便我们获取Context中的数据源——跨层级通信解决方案
阿牛哥的博客
10-09 374
react之useConntext——便我们获取Context中的数据源——跨层级通信解决方案
react的组件之间的通讯方式 （全局通讯和跨级通讯）
qq_48386796的博客
02-22 586
1.跨级通讯 创建一个createContext文件 里面导出一个myContext import { createContext } from "react"; const myContext = createContext() export default myContext 父组件 import ChilA from "./com/chilA"; // 子组建 import React from "react"; import myContext from './createContex
React实现全局组件的Toast轻提示效果
10-17
React 实现全局组件的 Toast 轻提示效果是构建用户界面时常见的需求，尤其是在需要向用户提供即时反馈的情况下。本文将详细介绍如何在 React 应用中创建一个可全局调用的 Toast 组件，以及如何实现其不同类型的提示...
详解React中的组件通信问题
08-29
React中的组件通信是开发过程中必不可少的部分，它涉及到组件间的数据传递和状态管理。本文将深入探讨React组件间如何有效地进行通信，以及不同情况下使用的策略。 首先，我们要理解React的核心概念——单向数据流...
react开发教程之React 组件之间的通信方式
12-10
在React中，组件通信主要有以下几种方式： 1. **父子组件通信**：这是最基本的通信方式，通过props传递数据。父组件可以通过props向子组件传递数据，子组件则通过`this.props`来访问这些数据。在组件设计时，为了...
React(11)-全局共享通信Context
m0_65912225的博客
09-03 745
Context是什么? Context原理 发布订阅Provider&&Consumer组件的使用 1.创建方式(避免组件之间props传递) 2.Provider组件作用(important!!) 使用示例 版本1：正常props传值 版本2：context传值--双层嵌套 Provider组件： Consumer组件： 版本3：context传值--三层嵌套 注意： 版本4：context传值--抽离按钮行为 注意： 版本5：context传值--多个Provider场景(注
react之useContext、useReducer
大龙帅的博客
04-12 1057
一、useContetxt react父组件传值给子组件，可以直接在组件上传值。如果有多个子组件或者还带有孙子组件，那么普通传值就会很繁琐，useContext能够实现组件状态的穿透 父组件创建一个 context 状态，我这里用 ts 给了个类型，没用到 ts 可以忽略 import { createContext, useState, useContext } from 'react'; type ContextType = { count: number }; const ConfigCon
react-global-components:启用React以实现全局组件的库
03-15
React全局组件 启用React以实现全局组件的库。 Npm /纱线 npm i react-global-components yarn add react-global-components 入门 要求 esNext React 编辑档案 // src/index.js or src/app.js import ReactGlobalComponents from 'react-global-components' ; ReactGlobalComponents ( ) ; // plugins/Card.js import { Card } from 'card-components' ; export default Card ; 重要的！！ 您可以通过文件名来调用它。 不得使用保留字。 // Every Where Can Call Tt without import
React,Hooks中useContext的使用
weixin_45389051的博客
07-29 1906
之前在class组件里面，有一个Context还好，但是多个的话我们就要进行无限嵌套，特别麻烦 在hooks中如何使用呢?? 首先创建一个home.js(父组件),这里定义两个Context来展示效果 import MemoDemoTwo from '(子组件)' export const UserContext = createContext() export const ThemeContext = createContext() <UserContext.Provider value={{n
React useContext和传统的props传参二种方法的思考
热水钟博客
05-10 1791
一、useContext （一）useContext的应用场景： 我的理解适合两种场景： 1.全局状态的定义，即可以被不同层级的组件所需要。 2.多个组件之间传参（他们之间可能是跨多层级即祖孙关系传参）时。 如果普通的父子组件之间传参，即父子组只有单纯的一层时，用props传参更省事，useContext反而不是最佳的选择，官方也是这样推荐的（建议用组合组件来完成传参）。 （二）useContext的用法： 步骤一...
React中useContext(全局公共状态)的使用
m0_58447769的博客
11-12 1907
关于使用useContext的固定套路有以下几个步骤: (一) 导入并调用createContext,得到Context对象并导出. import { useContext } from 'react' export const Context = React.createContext() // 这里有导出 (二) 使用Provider组件包裹根组件,并通过value属性提供要共享的数据. return ( <Context.Provider valu
React入门--第四天--useRef/useContext
weixin_44809439的博客
11-15 424
useRef/useContext 先看一个bug import React from "react"; import ReactDOM from "react-dom"; const rootElement = document.getElementById("root"); function App() { const [n, setN] = React.useState(0); const log = () => setTimeout(() => console.log(`n:
5、react-useContext简单应用
RRRRRDong的博客
01-05 667
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法 。 主要应用场景：为不同层级的组件提供访问同样数据。 创建一个共享的UserInfoContext文件 userInfoContext.js import React from 'react' export const UserInfoContext = React.createContext(null) 在顶层组件Parent.js中，传递需要共享的数据 import React from 'reac
React Hooks - useContetx和useReducer的基本使用
热门推荐
m0_71485750的博客
10-24 1万+
更新时，该 Hook 会触发重新渲染，并使用最新的值传递给 MyContext provider 的 context value 值。允许我们通过Hook来直接获取某个Context的值, 相对于class组件中的使用方式会简单非常多;在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分;再在函数组件中通过useReducer函数将我们定义的reducer函数使用起来。或者这次修改的state需要依赖之前的state时，也可以使用;会导致代码阅读性非常差。
react组件通信方式汇总
ebonyzhang
01-09 1万+
父组件向子组件通信 父组件更新组件状态，通过props传递给子组件，子组件得到后进行更新。 Timer 是倒计时子组件，集成在了OrderPay父组件里，父组件向子组件传订单数据参数order对象。如下代码： &amp;amp;amp;lt;Timer order={order} /&amp;amp;amp;gt; //倒计时组件 在子组件里直接通过props获取父组件传递过来的参数，如下： let order = this.props.or...
react+hook组件通信
01-17
在React中，组件通信是非常重要的。使用React Hooks，我们可以使用一些钩子函数来实现组件之间的通信。 一种常见的组件通信方式是通过props传递数据。父组件可以将数据作为props传递给子组件，子组件可以通过props接收并使用这些数据。 另一种常见的组件通信方式是使用上下文（Context）。上下文提供了一种在组件树中共享数据的方法，而不必通过props一层层传递。可以使用`createContext`函数创建一个上下文对象，并使用`Provider`组件提供数据，然后在子组件中使用`useContext`钩子函数来获取数据。 下面是一个示例，演示了如何使用React Hooks实现组件通信： ```javascript import React, { createContext, useContext } from 'react'; // 创建一个上下文对象 const MyContext = createContext(); // 父组件 function ParentComponent() { const data = 'Hello from parent'; return ( <MyContext.Provider value={data}> <ChildComponent /> </MyContext.Provider> ); } // 子组件 function ChildComponent() { const data = useContext(MyContext); return <h1>{data}</h1>; } // 渲染父组件 ReactDOM.render(<ParentComponent />, document.getElementById('root')); ``` 在上面的示例中，父组件通过`MyContext.Provider`提供了数据`Hello from parent`，子组件通过`useContext`钩子函数获取到了这个数据，并将其渲染到页面上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值