Question

我是新的反应和特殊模式。我想要做的是使用<hr/>标记加入组件，以便每个组件用一条线分隔。所以我有：

import React, { Fragment } from 'react';

const withSeparator = (ComponentList) => () => (
  <Fragment>
    { ComponentList.reduce((prev, curr) =>
      <Fragment>{prev} <hr/> {curr}</Fragment>
    ) }
  </Fragment>
)

export default withSeparator;

我想知道这个withSeparator是否是HOC，因为它不接受Component，但是它接受了Components组件。我想知道我应该将这个withSeparator函数放在哪里，使用普通的实用函数或者使用其他特殊文件夹。

当我使用它时，它有点混乱，打破了我的项目风格。

const Achievement = withSeparator(
  achievements.map((event, i) =>
    <React.Fragment key={i}>
      .
      .
      .
    </React.Fragment>
  )
)

export default <Achievement class="container" />

Answer 1

我不确定为什么在这种情况下你需要HOC。可以使用如下的简单React组件来完成：

const Foo = () => <div>Foo</div>;
const Baz = () => <div>Baz</div>;

const ComponentListWithSeparator = ({list}) => (
  <div>
    {list.map((component, i) =>
      <React.Fragment key={i}>
        {React.createElement(component)}
        <hr/>
      </React.Fragment>
    )}
  </div>
)

用法：<ComponentListWithSeparator list={[Foo, Baz]}/>

或者您可以这样使用children：

const ComponentChildrentWithSeparator = ({children}) => {
  const childrenWithSeparator = React.Children.map(children, (child, i) => (
    <React.Fragment key={i}>
      {child}
      <hr/>
    </React.Fragment>
   ))
   return (
     <div>
       {childrenWithSeparator}
     </div>
   )
}

然后使用它：

 <ComponentChildrentWithSeparator>
    <Foo/>
    <Baz/>
  </ComponentChildrentWithSeparator>,

这两个例子都可以检查here

高阶组件接受数组？

1 个答案: