javascript - 如何在 React 中使用 HOC 传递静态 navigationOptions?
问题描述
我想制作一个 HOC 以将 navigationOptions 传递给传递的组件。
const withNavigationOptions = Component => ({ ...props }) => {
const ComponentWithNavigation = Component;
ComponentWithNavigation.navigationOptions = ({ navigation }) => {
const { title } = navigation.state.params;
return {
header: (
<Navbar
navigation={navigation}
title={title}
onBackPress={() => navigation.navigate('Dashboard')}
/>
)
};
};
return <ComponentWithNavigation {...props} />;
};
export default withNavigationOptions;
但是静态选项没有分配给返回的组件。任何帮助将不胜感激。
解决方案
将 navigationOptions 传递给渲染组件的正确方法是将其作为 props 传递。
const withNavigationOptions = Component => ({ ...props }) => {
const ComponentWithNavigation = Component;
const navigationOptions = ({ navigation }) => {
const { title } = navigation.state.params;
return {
header: (
<Navbar
navigation={navigation}
title={title}
onBackPress={() => navigation.navigate('Dashboard')}
/>
)
};
};
return <ComponentWithNavigation {...props} navigationOptions={navigationOptions} />;
};
export default withNavigationOptions;
在您的情况下,未将静态选项提供给返回的组件,因为您将其添加到呈现的组件而不是返回的功能组件上。
推荐阅读
- loops - 命令提示符比较不同文件夹中的不同 xml 文件以检查差异
- python - 从视频游戏屏幕截图中提取尽可能多的文本的最佳方法是什么?
- firebase - 子集合中的firestore查询
- python - 在 Python 中使用 ML 按购买对用户进行分组
- css - 如何使用 stylelint 为 Jenkins 生成 checkstyle.xml?
- sql-server - 为数据库编写代码
- mysql - 如果较大则选择是 如果较小则选择否
- python - Python数据爬虫维基百科保护策略
- php - Laravel voyager - 无法解决需求
- c# - 重新启动 Windows.Web.Http.HttpClient on progress 事件的内部取消计时器