高次コンポーネントは配列を受け入れますか？

Question

私は反応し、ホックパターンに新しいです。私がやりたかったのは、コンポーネントを<hr/>タグで結合して、各コンポーネントを1行で区切ることでした。 だから私は持っている：

import React, { Fragment } from 'react'; 

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

export default withSeparator; 

そして、それはコンポーネントを受け入れていないが、それはコンポーネントの配列を受け入れているため、このwithSeparatorがHOCsある場合、私は思ったんだけど。そして、私はこれを通常のユーティリティ機能や他のhocsフォルダと一緒にどこに置くべきなのか疑問に思っています。

私はそれを使用しているとき、それはちょっと面倒で、私のプロジェクトのスタイルを壊しています。

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

export default <Achievement class="container" /> 

Answer 1

この場合、なぜHOCが必要かわかりません。

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