React / Reactstrap 警告：在严格模式树中检测到遗留的上下文 API。

Question

这是全新的安装 - 我还没有在Alert组件上添加任何过渡效果。

要复制代码很简单。

import React from "react";
import { Alert } from "reactstrap";

export const Index = () => {
   return (
      <div>
         <Alert color='primary'>This is a primary alert — check it out!</Alert>
      </div>
   );
};

错误消息: 请更新以下组件: Transition

如何更新或完全删除Transition？

- Michael Nelles

Answer 1

如果有人在搜索问题后来到这里，想要了解更多信息，那么这就是答案。

React Strap（截至本篇文章发布时）使用了react-transition-group 让事物淡入淡出和菜单上下滑动。在这个主题上和Github上综合信息后，他们目前正在更新库。我忽略了警告完成了该组件的编码。

它没有妨碍该组件的迭代。愉快地编写代码吧。

- Michael Nelles

---

我没有使用reactstrap，但仍然遇到了这个错误。有什么想法吗？ - AbhimanuSharma

我最好的猜测是存在一个依赖库未能正确编译或存在安全风险。尝试使用 ncu -u 更新你的 package.json，然后运行 npm i（ncu = node-check-updates）https://www.npmjs.com/package/npm-check-updates - Michael Nelles

更新：截至2022年2月，ReactStrap中仍未解决此问题。GH线程：https://github.com/reactstrap/reactstrap/issues/1833 - Freewalker

Answer 2

我也遇到了同样的警告，并通过修改index.js文件中的<React.StrictMode>值为<React.Fragment>来解决它。 虽然这样做可以消除警告，但不能保证您的代码不出现问题。

- Jorge Luis

---

这不是“修复”！沉默并不等于静音。 - miquelvir

因为这个回答鼓励了不良行为，所以我会给它点“踩”。 - Hubert Grzeskowiak

<React.StrictMode> 只在非生产模式下记录日志，因此删除它没有任何影响，除了在开发模式下隐藏有用的弃用/警告日志。如果您想要删除它，只需将其删除，而不是用片段替换它。 - Valentin

提醒一下，您提到的那两个标签并没有关系。如果您将其替换为 DIV 标签，结果是一样的。您移除了 StrictMode 标签，因此错误消失了。 - Sonic Soul

Answer 3

这个问题已经被报告并修复了，但即使使用更新的源代码，我仍然收到相同的错误。它不仅仅是错误，还会导致组件重新渲染。

以下是来自reactstrap存储库的一个github线程（但有许多这样的线程）：https://github.com/reactstrap/reactstrap/issues/1340 虽然与此警告相关的问题很多。

据我所知，它与Transition.js中的一个项目有关，我认为它可能与组件“进入”时的this.context调用有关。

但是，我遇到这个问题的项目是我正在构建的第一个React应用程序，我还没有准备好学习Legacy Context API，所以那只是我的最佳猜测，最终我选择了另一个包。

我没有资格将其放在评论中，因此我唯一的答案是：

1.向reactstrap团队报告问题并等待/协助修复 2.使用替代包

- Meep Teepo