如何使用hoist-non-react-statics
与withRouter
我在Feedback
组件中添加了一个静态方法。
这是我的原始代码。我正在尝试使用Context API中的新更改(反应第16.6节)
Feedback.contextType = AppContext;
export default withRouter( Feedback );
这工作正常,但我在控制台中收到以下警告。
警告:withRouter(反馈):功能组件不支持contextType。
因此,为了修复警告,我使用了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
中没有填充路由器信息(历史记录,匹配等)
任何指针为什么它不工作?
第二个片段不应该起作用,因为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;
我在使用和不使用“hoist-non-react-statics”时发出了警告,当我将react-router-dom更新到最新版本(5.0.0)时它就消失了