将提升非反应静态与 withRouter 一起使用答案

【问题标题】：Use hoist-non-react-statics with withRouter将提升非反应静态与 withRouter 一起使用
【发布时间】：2019-04-29 18:31:11
【问题描述】：

如何使用hoist-non-react-statics 和withRouter

我正在Feedback 组件中添加一个静态方法。

这是我的原始代码。我正在尝试使用 Context API (react v 16.6) 中的新更改

Feedback.contextType = AppContext;

export default withRouter( Feedback );

这工作正常，但我在控制台中收到以下警告。

警告：withRouter(Feedback)：功能组件不支持上下文类型。

所以为了修复警告，我使用了 Dan here 提出的方法。它也在反应docs

中提到

所以我现在有这段代码，但它不起作用。

导入hoist-non-react-statics

import {Link, withRouter} from 'react-router-dom';
import hoistNonReactStatics from 'hoist-non-react-statics';

并像这样导出组件

Feedback.contextType = AppContext;
hoistNonReactStatics( Feedback, withRouter(Feedback) );

export default Feedback;

但由于某种原因，props 中未填充路由器信息（历史记录、匹配等）

任何指针为什么它不工作？

【问题讨论】：

目前还不清楚是什么问题。提升非反应静态和道具之间有什么联系？你是说道具在没有提升非ReactStatics 的情况下可以正常工作，但不能在提升非反应状态下工作？
@estus 我已经用更多细节更新了这个问题......
我无法重现此警告，但提供了修复。希望这会有所帮助。

标签： javascript reactjs router react-router-v4

【解决方案1】：

第二个 sn-p 不应该工作，因为 withRouter(Feedback) 没有从模块中导出。

正如linked issue 解释的那样，问题在于hoist-non-react-statics 未正确处理contextType 静态属性。这已在最新的hoist-non-react-statics 版本中得到修复。由于react-router 使用较旧的hoist-non-react-statics 版本作为依赖项，因此可以就地修复：

Feedback.contextType = AppContext;

export default Object.assign(withRouter(Feedback), { contextType: undefined });

或者：

Feedback.contextType = AppContext;

const FeedbackWithRouter = withRouter(Feedback);
delete FeedbackWithRouter.contextType;
export default FeedbackWithRouter;

或者：

export default withRouter(Feedback);

Feedback.contextType = AppContext;

【讨论】：

contentType 3.1.0 版本新增github.com/mridgway/hoist-non-react-statics/pull/62
没错。而 react-router 的依赖是 v2。请提供一种复制问题的方法。正如我所提到的，我无法复制它。如果问题是 withRouter(Feedback) 从包装的组件继承了 contextType，那么修复将解决它。
警告消失了，但是这个方法有一个缺点，正如 React 文档中提到的，我们需要事先了解静态方法。我正在寻找hoist-non-react-statics 的解决方案
这里你好像误解了hoist-non-react-statics的作用。它已经被withRouter应用了。再次应用它不会有任何好处。你所能做的就是否定它的影响。您不一定需要知道 contextType 是否存在。它应该在增强组件中消失。你可以使用你自己的助手，let withRouter(...args) => { let Comp = ReactRouter.withRouter(...args); delete Comp.contextType; return Comp } 或者 fork react-router，更新它提升非反应静态@^3.1 并可能做一个 PR。

【解决方案2】：

在使用和不使用 'hoist-non-react-statics' 的情况下，我都收到了警告，当我将 react-router-dom 更新到最新版本 (5.0.0) 时，它就消失了

【讨论】：