reactjs - 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