Question

如何将hoist-non-react-statics与withRouter一起使用

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

这是我的原始代码。我正在尝试在Context API中使用新更改（反应v 16.6）

Feedback.contextType = AppContext;

export default withRouter( Feedback );

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

警告：withRouter（反馈）：功能组件不支持 contextType。

因此，为了纠正警告，我使用了Dan here提出的方法。在react 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

中

任何指针为何不起作用？

Answer 1

第二个代码段不起作用，因为没有从模块中导出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;

Answer 2

我有和没有使用“提升器-非反应-静电”的警告，当我将react-router-dom更新到最新版本（5.0.0）时，该警告消失了

在withRouter上使用提升非反应静态

2 个答案: