reactjs - React HoC - 道具不会传递给包装的组件
问题描述
我有两个 HoC 组件。首先必须充当一些布局包装器,其中将包含一些用于移动渲染等的逻辑。
const LayoutWrapper = (Component: React.FC<any>): React.FC<any> => {
const Layout = () => {
const [layout, set] = React.useState("layout state");
return <Component
layout={layout}
/>;
}
return Layout;
} export default LayoutWrapper;
如果用户登录,第二个 HoC 将处理。
const Secured = (Component: React.FC<any>): React.FC<any> => {
const Wrapped = () => {
const [securedPagestate, set] = React.useState("secured page state");
const Layout = LayoutWrapper(Component);
return <Layout test={securedPagestate} />
}
return Wrapped;
}
export default Secured;
我已经包装了将呈现实际页面的主页组件,它需要从上面显示的两个 HoC 组件传递道具,但我只从 LayoutWrapper Hoc 而不是 Secured Hoc 组件获取道具。它实际上有什么问题?
const HomepageView = (props: HomepageViewProps) => {
return <>HOMEPAGE</>;
}
export default Secured(HomepageView);
解决方案
如果你想将 props 传递给你的包装组件,你必须这样做:
const Layout = (props) => {
const Wrapped = (props) => {
在 React 世界中,HOC 是函数,而不是组件,因此它们应该以小写字母开头:layoutWrapper
和secured
推荐阅读
- java - 我在我的 JavaFX 项目中找不到这个问题的答案:java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
- keras - 有什么方法可以将 weight.pt 模型转换为 weight.h5 或 weight.weights 转换为 weight.h5 格式
- java - Integer.toString() 行为怪异
- sql - 基于合并列的计数
- bash - 递归打印和删除匹配两种模式之一的文件
- android - 如何使用 ViewPager 使 ScrollView 中的 Stickable TabView 反应原生?
- php - 从 SimpleXMLElement 获取变量
- r - 使用循环组合向量
- netty - 如何在 Netty 4 中添加自定义加密?
- c++ - Rcpp 函数 - SegFault 错误和内存管理