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

Question

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

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

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

Feedback.contextType = AppContext;

export default withRouter( Feedback );

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

Warning: withRouter(Feedback): Function components do not support 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;

或者:

export default withRouter(Feedback);

Feedback.contextType = AppContext;