React Context - Context.Consumer 与 Class.contextType

2024-05-22

我正在学习新引入的 React.Context API,但我注意到它在示例中的消耗存在一些不一致。有的还是用原来的上下文.消费者HOC 方法,而有些(包括 React 文档)使用静态类.contextType method.

有什么区别以及为什么不一致?


事实证明静态类.contextType was React v16.6.0 新引入 https://reactjs.org/blog/2018/10/23/react-v-16-6.html#static-contexttype,作为上下文.消费者方法在类组件上被证明是有问题的。另外,好像确实有一个主要区别使用两者之间,静态 Class.Context 只允许您订阅单个上下文。

好消息是,它们似乎都能可靠地侦听 Context 更改,这意味着如果您只有一个 Context API,那么两者都足够好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Context - Context.Consumer 与 Class.contextType 的相关文章

  • React 和 ES6 继承

    Note 这篇文章是在 React 不支持 ES6 v12 时发布的 我有一个 ES6 课程 class BaseClass getInitialState return message Hello render return div di
  • 在 antd design React 中使用 DatePicker 和 Form FormItem

  • 如何使 TextInput 只接受最多 2 位小数且最大值?

    这是我在 React Native 中的 TextInput 组件的代码片段 模拟器上的渲染如下所示 我想让输入字段只接受十进制数onChangeText函数 我正在更新状态的值 我有什么想法可以实现这个输入绑定的最大值吗 我要检查里面的值
  • 将本地图像路径作为两个功能组件之间的 prop 传递

    我正在使用 React Native 开发一个项目 在该项目中我很难理解 props 在功能组件之间的工作原理 我的要求是创建一个可重用的按钮组件 我可以在其中传递项目内资源文件中的图像位置 这样它就会为我创建按钮 由于某种原因 如果我手动
  • 使用应用程序文件夹中的 Next.js 读取 URL 动态参数/slug

    我在获取动态路由中的参数时遇到问题 我在阅读时不断收到错误 类型错误 无法解构 router query 的属性 themenID 因为它未定义 另外 我无法使用next router但必须集成路由器next navigation 但这个没
  • 是否可以覆盖material-ui组件的默认道具?

    可以说我想要每一个Button组件来自material ui有默认的 propsvariant contained color secondary 这可能吗 这方面的文档在这里 https material ui com customiza
  • 获取React组件的类型propTypes定义

    假设有以下代码 TestComponent propTypes text React PropTypes string myEnum React PropTypes oneOf News Photos 我在另一个文件中执行了以下操作 使用
  • 处理 Redux 和 React 中错误的最佳实践

    我的 redux 操作中有一个异步函数 它在我的减速器中返回一个像这样的对象 user fetching false fetched false error null 所以基本上当我开始调用异步函数时我将 redux 状态更新为fetchi
  • 具有两组子组件的 React 组件

    我正在创建一个组件 需要接收两组子组件并放置在组件的两个不同部分中 let CreditCardForm icons fields gt div div div div icons div div div fields div let Cr
  • 如何聚焦反应路由器链接

    我有一个用于搜索的输入框 并且希望能够按向下键将焦点从输入移动到列表的第一个s 看来我这里的东西不起作用 因为不是实际的 DOM 节点 我能够使用它来工作 a 代替 though let Link require react router
  • Nextjs 无法在生产环境中的“.next”目录中找到有效的构建

    我正在 docker 中运行我的应用程序 但我的生产构建和启动脚本仅在 docker 环境中失败 虽然node env开发在docker环境下运行良好 这是我的脚本 无法进行生产构建并启动服务器 我正在使用nodemon和babel bui
  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • 使用 jestjs 时模拟 sessionStorage

    好的 我有一个简单的示例 React 组件 它与会话存储 https developer mozilla org en US docs Web API Window sessionStorage App jsx var React requ
  • Vue中有类似React.Fragment的东西吗?

    在 React 中我可以做这样的事情 parent component export default return div div 1 div div
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component

随机推荐

  • MySQL InnoDB引擎是否对只读事务运行任何性能优化

    根据参考文档 只读事务标志可能会提示存储引擎运行一些优化 设置会话事务只读 如果事务访问模式设置为 READ ONLY 则对表进行更改 被禁止 这可能使存储引擎能够提高性能 不允许写入时可能进行的改进 InnoDB引擎是否对只读事务运行这样
  • 如何使用 R 更改 png 文件的大小

    我正在绘制 png 文件并获取一张小图片 你知道一些可以改变 png 图大小的简单代码吗 我的地块太高太 薄 另外有没有办法改变情节的分辨率 谢谢 伊格尔 png png filename Rplot 03d png width 480 h
  • 如何指定 RoboVM Gradle 使用什么临时配置文件?

    我搜索了一下 发现编辑 build gradle 是这样的 project ios apply plugin robovm robovm iosSignIdentity iosProvisioningProfile iosSkipSigni
  • System.InvalidCastException:指定的强制转换无效

    使用 WatiN 的自动化正在进行中 使用几个并发线程来测试应用程序 很少有线程失败 日志报告 堆栈跟踪显示以下内容 System InvalidCastException Specified cast is not valid at SH
  • 如果验证失败,如何在 ASP.NET MVC 中阻止 jquery ajax 提交

    我在用ASP NET 5 MVC RC1 我的 ASP NET MVC 使用的 jquery 验证插件是默认 ASP NET 5 模板项目使用的标准 jquery validate js jQuery Validation Plugin v
  • 我可以在 Swift 3 项目中使用 Swift 2.3 框架吗?

    在我的项目中 我将所有私有 swift 2 3 文件迁移到 swift 3 我想使用用 swift 2 3 编写的遗留框架 直到它们有 swift 3 版本 我尝试添加 使用旧版 Swift 版本 是 清除 构建我的项目 但我仍然遇到一些麻
  • Linq Where 本地计数器关闭在 VS watch 中的结果不同

    我尝试删除前 3 个元素array与 LinQWhere扩展功能 这是一个例子 var array new 1 2 3 4 5 6 7 8 9 var count 3 var deletedTest1 0 var test1 array W
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • 如果从超链接打开,应用程序将启动两次

    我正在开发一个应用程序 可以从多个地方启动 例如日历中的超链接 我在以下场景中面临问题 如果应用程序已启动并在后台运行 并且用户单击本机日历中的事件 超链接来启动应用程序 我的应用程序作为新实例启动两次 在正在运行的应用程序列表中 我可以看
  • 如何获取 Html.Editorfor 的日期选择器

    在我的 MVC3 剃刀页面上 我有一个日期字段 Html EditorFor model gt model Member Dob 下面给出的是我试图获取出生日期字段的日期选择器的代码 Scripts jquery validate min
  • Immutable.js 推入嵌套对象中的数组

    假设有一个对象 const object foo bar 1 2 3 我需要推动4 to object foo bar array 现在我正在这样做 const initialState Immutable fromJS object co
  • 更改 WireMock __files 目录

    来自docs http wiremock org docs stubbing 要从文件中读取正文内容 请将文件放在 files 下 目录 默认情况下 这应该位于 src test resources 下 从 JUnit 规则运行时 当独立运
  • 夏季化上方的树枝和行

    我对 twig 有点陌生 我知道可以在模板中添加值并将它们收集在变量中 但我真正需要的是在总结它们之前在模板中显示汇总值 我需要像旧 symfony 中的插槽之类的东西 或者在 php 中我可以通过 ob start 来做到这一点 以某种方
  • Golang 中的确定性 RSA 加密 - 如何在多次加密下为给定消息获得相同的结果

    对于下面的RSA加密代码 每次对同一条消息进行加密时 结果都会不同 我发现这是由于rand Reader in the rsa EncryptOAEP功能使其更加安全doc https pkg go dev crypto rsa Encry
  • 身份未映射异常

    System Security Principal IdentityNotMappedException 无法转换部分或全部身份引用 该错误仅在应用程序注册后出现一次 当 SecurityIdentifier 无法映射时 例如 返回 Ide
  • 无法为对象堆保留足够的空间

    每次尝试运行该程序时 我都会重复出现以下异常 VM初始化期间发生错误 无法为对象堆保留足够的空间 无法创建Java虚拟机 我尝试增加虚拟内存 页面大小 和 RAM 大小 但无济于事 我怎样才能消除这个错误 运行 JVM XX MaxHeap
  • 在多个 emacs 缓冲区上执行特定命令

    有没有办法在多个缓冲区上执行 emacs 命令 而不必单独选择它们并在每个单独的缓冲区上执行它 我通常打开与特定正则表达式匹配的多个文件 例如 py并希望启用特定模式 例如hs minor mode or glasses mode在每个上
  • 过滤列表视图并获取正确的 onclick 项目

    我有一个列表视图 并且已经实现了过滤 假设我有项目 A B 和 C 如果我在过滤框中输入 B 则只会显示项目 B 它是列表的位置 0 之前位于位置 1 因此 当我调用 onClick 项目时 我得到 id position 0 这导致显示有
  • 字节到二进制字符串 C# - 显示所有 8 位数字

    我想在文本框中显示一个字节 现在我正在使用 Convert ToString MyVeryOwnByte 2 但是 当字节开头有 0 时 这些 0 就会被删除 例子 MyVeryOwnByte 00001110 Texbox shows g
  • React Context - Context.Consumer 与 Class.contextType

    我正在学习新引入的 React Context API 但我注意到它在示例中的消耗存在一些不一致 有的还是用原来的上下文 消费者HOC 方法 而有些 包括 React 文档 使用静态类 contextType method 有什么区别以及为