React HoC - 道具不会传递给包装的组件

Question

我有两个 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);

Answer 1

如果你想将 props 传递给你包装的组件，你必须这样做：

const Layout = (props) => {

const Wrapped = (props) => {

在 React 世界中，HOC 是函数，而不是组件，因此它们应该以小写字母开头：layoutWrapper 和 secured

React HoC - 道具不会传递给包装的组件

React HoC - props are not passed to wrapped component

reactjs

react-props

react-hoc