reactjs - 如何访问功能性 HOC 中的 props？

Question

我的代码类似于以下内容:

const HOC = (props, WrappedComponent) => {
    return (
       <>
          <WrappedComponent />
          <Icon className="props.iconStyles" />
       </>
     );
};

这实际上并不是有效的代码，但您希望可以看到我想要完成的任务。我希望能够通过以下方式使用它:

<HOC iconStyles="icon-stuff">
    <TheComponentIWantToWrap>
</HOC>

我怎样才能正确地写这个，以便能够传递 Prop ？我想我可能也需要在这里使用 children ，但不确定。

Answer 1

事情应该是这样的。

const HOC = (WrappedComponent) => {

  const MyComponent = props => {
    return (
       <>
          <WrappedComponent {...props} />
          <Icon className={props.iconStyles} />
       </>
     );
   }
   
  return MyComponent;
};