反应简单的高阶组件

如何解决反应简单的高阶组件

我的目的是制作一个简单的 Higher Component ，其中我有一个可重用的Section组件，并且可能在其中定义了一些CSS类和<section>标签：

import React from 'react'

function SectionWrapper(props) {
  return <section>{props.children}</section>
}

export default SectionWrapper

现在在我的父组件中，我可以像下面这样包装我的子节组件：

<SectionWrapper>
  <SectionTitle />
</SectionWrapper>

<SectionWrapper>
  <List />
</SectionWrapper>

有没有更清洁的方法来实现这一目标？例如。如何将子组件作为道具传递？

解决方法

是的，你可以-

const withSection = (Component) => (props) =>
 <section><Component {...props}/></section>

const EnhancedSectionTitle = withSection(SectionTitle)

然后像使用它

<EnhancedSectionTitle />

将EnhancedSectionTitle重命名为您的应用中有意义的任何内容

,

您可以按如下方式将节包装器转换为高阶组件：

const withSection = Component => props => (
  <section>
    <Component {...props} />
  </section>
);

确保您返回一个有效的react组件，该组件可以将prop传递给要包装的基础组件。

用法：

const ComponentWithSection = withSection(MyComponent);

...

<ComponentWithSection myProp={myAwesomeProp} />