React HoC - пропсы не передаются обернутому компоненту

Question

У меня два компонента HoC. Сначала он должен служить некой оболочкой Layout, которая будет содержать некоторую логику для мобильного рендеринга и т. Д.

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;

Second 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

Answer 2

      // HIGHER ORDER COMPOENTS IN REACT
// Higher order components are JavaScript functions used for adding 
// additional functionalities to the existing component.


// file 1:  hoc.js (will write our higher order component logic) -- code start -->

const messageCheckHOC = (OriginalComponent) => {
  // OriginalComponent is component passed to HOC

  const NewComponent = (props) => {

    // business logic of HOC 
    if (!props.isAllowedToView) {
      return <b> Not Allowed To View The MSG </b>;
    }

    // here we can pass the props to component
    return <OriginalComponent {...props} />;
  };

  // returning new Component with updated Props and UI
  return NewComponent;
};

export default messageCheckHOC;

// file 1:  hoc.js  -- code end -->


// file 2: message.js  -- code start -->
// this is the basic component we are wrapping with HOC 
// to check the permission isAllowedToView msg if not display fallback UI

import messageCheckHOC from "./hoc";

const MSG = ({ name, msg }) => {
  return (
    <h3>
      {name} - {msg}
    </h3>
  );
};

export default messageCheckHOC(MSG);
// file 2: message.js  -- code end -->


// file 3 : App.js -- code start --->
import MSG from "./message.js";

export default function App() {
  return (
    <div className="App">
      <h3>HOC COMPONENTS </h3>
      <MSG name="Mac" msg="Heyy !!! " isAllowedToView={true} />
      <MSG name="Robin" msg="Hello ! " isAllowedToView={true} />
      <MSG name="Eyann" msg="How are you" isAllowedToView={false} />
    </div>
  );
}

// file 3 : App.js -- code end --->