【提问】react的context组件传值。为什么写成箭头函数拿不到下发的value

已于 2022-09-22 10:19:59 修改
阅读量305 收藏
点赞数
分类专栏： react 文章标签： react.js 前端 前端框架
于 2022-09-22 10:18:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71266141/article/details/126986540
版权 
<CurrnetUserContext.Provider value={() => currentUser}>
   
</CurrnetUserContext.Provider>
<CurrnetUserContext.Provider value={currentUser}>
   
</CurrnetUserContext.Provider>

这两段代码的区别在哪哇，之前的代码是第一种写法，导致页面一直出问题，把箭头函数删掉只写入字段就可以拿到了，但是箭头函数return一个字段按理来说也是可以拿到的吧，还是context这个传值规定了value的用法？

_CherryBoom_
关注
专栏目录
RN JSBundle 拆分解决方案（3）: 固定ModuleId，JSBundle按需加载
...
11-30 3489
实践源码：react-native-split-bundle：https://github.com/songxiaoliang/react-native-split-bundle 前面两篇文章分别从源码加载、Bundle文件结构、Metro打包工具等做了简单分析，逐步了解关于RN打包，Bundle 文件加载的相关内容。本篇内容将结合代码来完成最终的实现方案。在阅读该篇博客内容前，可以点击如...
基于ReactNative实现动态加载
QiwooMobile的博客
12-24 5310
背景 最近看到某厂Android端物联网Demo演示应用中可动态加载模块，具体操作是在控制台拖拽生成一个模块和链接地址。然后在Android端刷新首页即可看到新添加的模块。下载Demo代码之后发现用到了facebook开源的react-native框架。然后打算研究一下是否能模拟动态下发模块的效果。 于是决定从以下几个方面来实现这个过程。 1、服务端——实现首页接口及下载接口 服务端用Spring...
【Vue】001 箭头函数的返回值问题
august_shi的专栏
06-19 795
箭头语法返回值
ReactJS useContext使用
weixin_43676119的博客
04-09 7005
ReactJS useContext使用版本要求步骤1.创建Context2.使用MyContext.Provider提供value3.使用useContext(MyContext)获得数值value易错点 版本要求 react > 16.8 步骤 1.创建Context 2.使用MyContext.Provider提供value 3.使用useContext(MyContext)获得数值v...
react Context/Provider/Consumer传参使用
有问题 ! 请留言 !
08-06 6435
react Context/Provider/Consumer传参使用 react context这个api很少用到,所以一直不太清楚如何使用,最近在看antd的项目源码时,发现在组件中有类似Template.Comsumer的写法,一时没反应过来,本着碰到不懂得都要追根究底的原则,下面好好学习一下,Context这个api的使用 Context 作用 上下文(Context) 提供了一种通过...
React使用Context
weixin_44530344的博客
09-14 619
编写组件的时候我们经常使用属性简写组件之间的传值，但是有时候我们的组件层级比较高，这导致我们传递的属性在一些中间组件并没有被使用，导致代码比较乱，这时候我们可以使用Context，Context相当于一个公共的存储空间。useContext() 需要一个Context作为参数，它会将Context中数据获取并作为返回值返回。它会将context设置为回调函数的参数，通过参数就可以访问到context中存储的数据。2.使用钩子函数useContext()获取到context。使用Context有两种方式。
React的Context在类组件和函数式组件中的使用
m0_56986233的博客
04-18 2359
1.引入context，并解构出来 import React, { Component } from 'react' const NameContext = React.createContext() //Provider是给类组件 Consumer是类函数都可以 使用 const { Provider, Consumer } = NameContext 2.定义一个State state = { username: 'tom', age: 18 } 3.将你需要传递给子孙组件的值用Provider包
React组件传值
Haibei11的博客
07-28 82
父子传值：在父组件里的子组件标签上定义属性，在子组件里使用props接收。子父传值：父组件给子组件传入一个方法，子组件接收这个方法，在对应的事件里触发接收到的方法，并且可以传参。子传父本质上来说就是通过观察者去触发了一个回调函数。同级传值：在React框架中，当多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。一般我们将该操作称为状态提升。类组件：通过context进行传值。在祖组件内引入context，使用context的provider方法包裹所有的子组件，再使用provid
React - Context API 维护全局状态，实现全局组件通信
weixin_46107920的博客
11-09 404
Context API 维护全局状态，实现全局组件通信 Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。 我们通过调用React.createContext，可以创建出一组 Provider。Provider 作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer。 React.createContext： ​ 作用是创建一个 context 对象。 const AppContext = React.createC
ECMA进阶2之从0~1搭建react同构体系项目2
qq_34306228的博客
04-15 663
webpack：cross-env能够声明不同的环境，dev，prod，test 能够通过dev注入到process.env.NODE_ENV。cross-env 能够注入到全局环境下，在window，linux，mac不同环境下都能使用cross-env做好兼容，只是用于注入变量。当src/server，webpack，babel.config.ts这几个发生变化的时候，才会去解析这个包。当我们的组件发生变化时，只要在外面包裹ErrorBoundary，就能避免页面报错，展示的是兜底错误的提示。
android rn动态技术,基于ReactNative实现动态加载
weixin_33433927的博客
05-26 751
背景最近看到某厂Android端物联网Demo演示应用中可动态加载模块，具体操作是在控制台拖拽生成一个模块和链接地址。然后在Android端刷新首页即可看到新添加的模块。下载Demo代码之后发现用到了facebook开源的react-native框架。然后打算研究一下是否能模拟动态下发模块的效果。于是决定从以下几个方面来实现这个过程。1、服务端——实现首页接口及下载接口服务端用Spring Boo...
ReactNative开发笔记（持续更新...）
kovlistudio的博客
12-19 904
本文均为RN开发过程中遇到的问题、坑点的分析及解决方案，各问题点之间无关联，希望能帮助读者少走弯路，持续更新中… （2018年12月19日更新） 原文链接：http://www.kovli.com/2018/06/25/rn-anything/ 作者:Kovli - ReactNative输入框TextInput点击弹起键盘，如果键盘遮挡了重要位置，如何让界面自动跟随键盘调整？ 使用这个组件Key...
react hooks useContext
gwdgwd123的博客
07-13 2787
const context = useContext(conntext) 数据共享的api 通常使用redux mobx dva实现 conntext 是react 提供的实现数据共享的api . 解决props层层传递的问题 1.React.createConntext()创建Context对象 2.使用Context Provider 包裹组件 给他的后代组件提供数据 3.Cont...
react context初始加载读取不到上下文的内容
黑星
03-11 2093
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Counter from './Counter'; class SummaryContainer extends Component { constructor (props) { super(props); ...
react使用Context方法实现组件通信（案例说明嵌套传值+详细用法总结）
weixin_45745641的博客
03-14 1831
文章目录前言Context祖孙传值嵌套传值==Context使用步骤总结== 前言 之前的文章我们介绍了在react中使用props实现组件通信，比如父子，祖孙通信，但是使用props一层层传递的时候还是很麻烦的，那么今天这篇文章就来介绍新的用法——使用Context实现组建通信 Context 在react官方文档中是这样解释的：Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。此处附上传送门Context-react Context 设计目的是为了共享那些对
React18新特性
警警的博客
10-06 1143
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
【Spring Boot & React】Spring Boot和React教程 完整版
ccf19881030的专栏
10-05 746
在B站找到一个不错的SpringBoot和React的学习视频，作者是。值得仔细学习一下，特此记录。
React 为什么引入 Hooks ？
u010194271的博客
10-08 553
React 中的“Hook”之所以得名，是因为它能让你“钩住”函数组件中的状态管理、生命周期和其他特性，类似于编程中常见的“钩子”概念。通过 Hooks，你可以在 React 中更灵活地插入逻辑、管理状态，提供了一种简洁、模块化的方式来构建复杂应用。
React 插入不转义的html
最新发布
y523648的博客
10-08 369
在 React 中，字符串作为内容插入到 JSX 中，默认会被转义。这是为了防止 执行恶意代码，XSS（跨站脚本攻击）等安全问题。如果想要 HTML 不被转义，可以使用dangerouslySetInnerHTML属性。
react函数组件传值
05-19
React 函数组件传值有两种方式：props 和 useContext。 1. 通过 props 传值 在函数组件中，可以通过 props 传递数据。父组件中声明一个属性，然后在子组件中使用这个属性即可传递数据。 例如： ```jsx function ParentComponent() { const data = 'hello world'; return ( <ChildComponent data={data} /> ); } function ChildComponent(props) { return ( <div>{props.data}</div> ); } ``` 2. 通过 useContext 传值 useContext 是 React 提供的一个 API，可以在组件之间共享数据。使用 useContext 后，可以在任何深度的组件中获取到共享的数据。 例如： ```jsx const DataContext = React.createContext(); function ParentComponent() { const data = 'hello world'; return ( <DataContext.Provider value={data}> <ChildComponent /> </DataContext.Provider> ); } function ChildComponent() { const data = useContext(DataContext); return ( <div>{data}</div> ); } ``` 以上就是 React 函数组件传值的两种方式。如果传递的数据比较简单，可以使用 props；如果需要在多个组件中共享数据，可以使用 useContext。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值