React Ho C - реквизиты не передаются обернутому компоненту

Question

У меня есть два компонента Ho C. Во-первых, это должна быть оболочка Layout, которая будет содержать логи c для мобильного рендеринга и т. Д. c.

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;

Второй Ho C позаботится, если пользователь вошел в систему.

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;

У меня есть обернутый компонент домашней страницы, который будет отображать реальную страницу, и он должен иметь реквизиты, передаваемые из обоих компонентов Ho C, которые показаны выше, но я получаю только реквизиты, передаваемые из LayoutWrapper Ho c и не из обеспеченного компонента Ho c. Что на самом деле не так с этим?

const HomepageView = (props: HomepageViewProps) => {
    return <>HOMEPAGE</>;
}

export default Secured(HomepageView);

Answer 1

Если вы хотите передать реквизиты своим обернутым компонентам, вы должны сделать это следующим образом:

const Layout = (props) => {

const Wrapped = (props) => {

В мире React HO C являются функциями, а не компонентами, поэтому они должны запускаться с буквой в нижнем регистре: layoutWrapper и secured