如何访问功能 HOC 中的道具？

Question

我有类似于以下的代码：

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

这实际上不是有效的代码，但您可以希望看到我正在尝试完成的工作。我希望能够通过以下方式使用它：

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

我怎样才能正确地写这个，以便能够通过道具？我想我可能也需要在children这里使用，不确定。

Answer 1

它会是这样的。

const HOC = (WrappedComponent) => {

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

Answer 2

AnHOC是一个返回 aComponent并通常在其上注入一些的函数props。你应该分开关注点。实际HOC应该是这样的

const withFoo = Component =>{
    return props =>{
        return <Component injectedProps='foo' />
    }
}

并被这样称呼

const Component = withFoo(({ injectedProps }) =>{
    return <jsx />
})

如果您想合并任意值，props请尝试将props传递的内容传播到Component

const withFoo = Wrapped =>{
    return props =>{
        return <Wrapped injectedProps='foo' {...props}/>
    }
}

<Component propsToBeSpreaded='bar' />

如果您愿意，可以创建一个附加层。

• HOC在 a 中注入一些 propsContainer
• Container接受任意props
• Container渲染children

代码

   const withHoc = Container =>{
        return () => <Container injected='foo' />
    }

    const Container = withHoc(({ children, injected, ...aditionalProps}) =>{
         return(
             <div {...aditionalProps}>
                 { children }
             </div>
         )
    })

并称其为

const FinalComp = () =>{
    return <Container foo='foo'> <span /> </Container>
}