0

我是反应和 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是否是 HOC，因为它不接受组件，但它接受组件数组。我想知道我应该把这个withSeparator函数放在哪里，用普通的实用程序函数或其他 hocs 文件夹。

当我使用它时，它有点凌乱并破坏了我的项目风格。

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

export default <Achievement class="container" />
4

1 回答 1

0

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

于 2017-12-22T14:38:36.897 回答