Компонент высшего порядка принимает массив?

Question

Я новичок, чтобы реагировать и Hocs шаблон. Я хотел объединить компоненты с <hr/> тег, чтобы каждый компонент был разделен линией. Так что я:

import React, { Fragment } from 'react';

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

export default withSeparator;

И мне интересно, если это withSeparator является HOCs, потому что он не принимает Компонент, но он принимает массив Компонентов. И мне интересно, где я должен положить это withSeparator функция, с обычными служебными функциями или с другой папкой hocs.

Когда я его использую, это немного грязно и нарушает стиль моего проекта.

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