问题标签 [react-16]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
962 浏览

reactjs - 如何将 React 16.3 上下文提供程序与 redux 存储一起使用?

我在一个代码库中工作,该代码库已经有一堆 redux 用于管理和持久化状态,以及调度操作。我使用新的 Context API 的目标是摆脱将所有这些状态传递给各种组件而必须做的道具钻探,但保留现有代码以在 redux 中管理状态。

现在我已经删除了过多的道具钻取代码,并用上下文提供者和消费者替换它们,将它们连接到我的组件中所有正确的位置。我仍在向 redux 发送操作并获取填充我的 redux 存储的 API 响应,并且我想以某种方式通知上下文以在 redux 存储的特定部分更新时进行更新。

我如何从 redux 商店获取更新,并将其发送到我的不同 Providers?

0 投票
0 回答
217 浏览

reactjs - 如何在 React 15 中使用带有 React.Fragments 的 3rd 方反应库

这是我的问题

在 React 16.3 中构建 React 组件库并使用React.Fragments.

遗憾的是,这需要支持几个不同的 React 站点,包括一个包含 React 的站点15.4.1

当尝试使用React.Fragment甚至在 babel、minification 等之后我得到的组件时

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

有没有办法在不更新旧站点反应版本的情况下支持这个用例?

0 投票
0 回答
819 浏览

javascript - 升级到 React v16,看到 Error: parentComponent must be a valid React Component

我通过私有 NPM 包向我的项目添加了一个新组件。如我的项目中所示,它具有以下依赖项system.config.js

当我运行我的应用程序时,我看到以下控制台错误:

一些谷歌搜索让我相信我在项目中安装了多个版本的反应这一事实可能会导致错误。我的依赖依赖于多个版本的 react,特别是:v0.14.9、v15.4.2、v16.2.0(这是根据这个新组件的要求在此处添加的版本)和 v16.3.2。我还安装了react-domv15.4.2 和 v16.3.2。Dan Abramov 在这里写道,多个版本的 react 试图在同一个项目中共存存在问题。鉴于我的项目现在包含高于 16.0.0 的反应版本,我运行了命令:

React 在跳转到 v16+ 时推荐使用此命令

我的render()函数中包含这个破坏组件的部分如下:

如何消除控制台错误?我不得不想象这个问题与反应版本和我的应用程序配置有关。我依赖这些旧版本的 react 的依赖项是关键任务,无法替换。即使他们使用旧的 react 版本,它们也是最新的。鉴于此信息,这是一个可解决的问题吗?

0 投票
0 回答
1142 浏览

reactjs - 片段内的反应组件未加载

我正在使用 react 16.2.0 和 react-dom 16.2.0。以下是我的代码。

我的问题是,我在里面返回的组件没有渲染。我在控制台中也没有任何错误。

我尝试渲染简单的html代码,例如

但问题仍然存在。有人可以帮我解决这个问题。

0 投票
1 回答
1041 浏览

reactjs - 实现 ReactDOM.createPortal 时的问题(react 16 功能)

为了澄清起见,假设我有 3 个组件:<Child>, <Parent>, <GrandParent>

我正在尝试<Child>在不渲染的<GrandParent>情况下渲染<Parent>(从中<Child>调用)。

父.js

单击 inside 的链接时<Parent>,我想<Parent>卸载并<Child>在其中进行渲染<GrandParent>,这是 React 新功能“门户”应该实现的。

从文档中,这应该如何实现:

但我不确定如何/在哪里使用这段代码。<Child>我尝试在旁边渲染的所有<Parent>内容,这不是我想要的。非常欢迎有关该主题的提示/文档/示例

0 投票
0 回答
168 浏览

javascript - 路线变更前的 setState

我有一个authentication通过 React 16 中的Provider/ Consumercontext API 使用的状态。

我最初在我的 main 中将此属性的状态设置Appfalse,然后对于任何受限制的组件(即需要经过身份验证的组件),我向后端查询以检查客户端上的当前令牌是否有效。

因此,当用户更改浏览器 URL 时,我希望authentication始终像最初一样被任何组件使用。false

如何authentication在每次路线更改时重置?我正在听,history.listen但如果我打电话setState,则无法保证在组件最初呈现之前authentication设置为状态。false

0 投票
1 回答
587 浏览

javascript - React 16.4 允许从状态更改中调用 getDerivedStateFromProps。如何应对?

所以 16.4 “修复”了 getDerivedStateFromProps 中的一个错误,现在它在道具更改和状态更改时都会被触发。显然这是有意的,来自这篇文章:https ://github.com/facebook/react/issues/12898 。但是对我来说,在该州保存以前的道具是一个很大的矫枉过正,所以我想问是否有人已经制定了处理这样的案例的程序:

所以在上述情况下,我永远不会改变输入,因为 getDerivedStateFromProps 将在收到的新道具和 setState 触发器上执行,我的条件甚至永远不会为假。

那么处理这种情况的正确方法是什么?我是否真的需要将旧道具保留在状态中并将它们也用于条件?

我刚从React看到这篇文章,但他们没有提供可行的替代方案。

谢谢你的帮助!

0 投票
1 回答
1960 浏览

reactjs - TypeError: plugin.test is not a function when using jest,酵素和react-16, typescript

我正在将我的 react 应用程序更新为react-16,但我的所有测试都停止了。我已经升级了enzyme, jest-enzyme, react-dom, 安装了enzyme-adapter, 创建了setupTest.ts酶文件, 更新了我的jestconfig.js文件但我仍然收到错误。如果有人知道可能出了什么问题。

做时没有依赖警告(与反应|测试有关)npm ls

这是我的jestconfig

src/setupTests.ts

0 投票
0 回答
435 浏览

javascript - Sentry 用户反馈模式未弹出 onClick

我已经设置了哨兵,它可以正常工作并正确发送错误,目前我正在使用报告反馈按钮制作“出现问题的页面”,问题是单击按钮时模式不会弹出,这是代码:

index.js:

以下是 GoneWrong 页面中包含 onClick 事件的按钮代码:

请注意 GoneWrong 页面确实呈现正确,唯一的问题是按钮 onClick。

0 投票
1 回答
378 浏览

javascript - 在 componentDidCatch 之后重定向用户的方法

在我的 componentDidCatch() 方法中捕获错误,并呈现自定义错误 UI。

什么是从错误中继续前进而不是让用户强制更新页面的巧妙方法?

当 hasError 设置为 true 时,它​​会停留在那里。将它设置为 false 并再次向孩子们展示的好地方在哪里?