Блог

Я хочу создать HOC, который получает компонент и вставляет его в мой Store компонент. Но я просто могу создать его внутри своего файла.

 const MyComponent: React.FC = (props: any) => {
  return (
    <div>my component</div>
  );
};

const HOC = (props) => (<Store>
  <SignedMotor {...props} />
</Store>);

export default HOC;
 

Как я могу сделать это в отдельном файле?
Вот так:

 const storeHoc: React.FC = (Component: React.FC) => (
  <Store>
    <Component />
  </Store>
);

export default storeHoc;
 

В React вызывается prop по умолчанию children . Все, что вам нужно сделать, это обернуть любые компоненты, которые вы хотите, своим HOC, и все компоненты внутри него будут переданы ему как дочерние. Вот так:

 const storeHoc: React.FC = ({children}) => (
  <Store>
    {children}
  </Store>
);

export default storeHoc;
 

Затем просто оберните им любой компонент:

   <StoreHoc>
    <Component1 />
    <Component2 />
  </StoreHoc> 
 

Еще один пример прямо из документации:

 function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('Current props: ', this.props);
      console.log('Previous props: ', prevProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}
 

В этом случае вы могли бы назвать это так: const EnhancedComponent = logProps(InputComponent);