反应简单的高阶组件答案

【问题标题】：React simple Higher Order Component反应简单的高阶组件
【发布时间】：2021-01-26 11:26:21
【问题描述】：

我的目的是制作一个简单的高阶组件，其中我有一个可重用的 Section 组件，并且我可能会定义一些 css 类和 <section> 标签：

import React from 'react'

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

export default SectionWrapper

现在在我的父组件中，我可以像这样包装我的子部分组件：

<SectionWrapper>
  <SectionTitle />
</SectionWrapper>

<SectionWrapper>
  <List />
</SectionWrapper>

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

【问题讨论】：

【解决方案1】：

是的，你可以这样做 -

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

const EnhancedSectionTitle = withSection(SectionTitle)

然后像这样使用它

<EnhancedSectionTitle />

将 EnhancedSectionTitle 重命名为您的应用中有意义的名称

【讨论】：

【解决方案2】：

您可以像这样将部分包装器转换为高阶组件：

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

确保您返回一个有效的 react 组件，该组件允许将 props 传递给被包装的底层组件。

用法：

const ComponentWithSection = withSection(MyComponent);

...

<ComponentWithSection myProp={myAwesomeProp} />

【讨论】：