Reactjs 如何将一个函数作为参数传递给另一个通过React中的列表映射的函数？

我正在尝试创建一个函数，它除了映射列表之外什么都不做。此函数始终相同，但列表项字段（字段）可以更改。因此，我试图将字段传递给map函数，这样我就可以重用map函数（List和Item），只更改字段

下面是我编写的代码示例。它按原样工作，但我不知道如何将map函数存储在其他地方，以便在多个类似组件之间重用

const Fields = (props) => {
  return (
    <Fragment>      
      <MediaGroup { ...props } />
      <TextRich   { ...props } /> 
      <LinkGroup  { ...props } />
    </Fragment>
  );
}

const Item = (props) => {
  return (
    <PanelBody title={ `Item ${props.index + 1}` } initialOpen={ false }>
      <PanelRow>
        <RmListItemMarkup { ...props } />
        <Fields           { ...props } />
      </PanelRow>
    </PanelBody>
  );
}

export const List = (props) => {
  const { attr } = props;
  return (
    <Fragment>
      <PanelBody title={ __('Content List') } initialOpen={ true }>
        <AddListItemMarkup { ...props } />
      </PanelBody>

      { (attr && attr.length) ? attr.map((item, index) => <Item key={ index } index={ index } { ...props } />) : null }
    </Fragment>
  );  
}

const字段=（道具）=>{
返回(
);
}
常量项目=（道具）=>{
返回(
);
}
导出常量列表=（道具）=>{
常量{attr}=props；
返回(
{（attr&&attr.length）？attr.map（（项，索引）=>）：null}
);  
}

理想情况下，我希望列表和项目能够在它自己的文件中运行，并从包含字段的文件中简单地导入它们。这样我就可以自定义字段并传递到列表，而不必在同一个文件中重复列表和项目。事实上，List和Item在技术上可以是相同的函数，我只需要传递字段

---

请告诉我，如果你知道这方面的任何解决方案。提前谢谢

一种方法是使用HOC：

const ItemType1=（道具）=>(
项目类型1
{JSON.stringify（props，未定义，2）}
);
const ItemType2=（道具）=>(
项目类型2
{JSON.stringify（props，未定义，2）}
);
常量ItemHoc=（ItemType）=>（道具）=>(
);
常量ListHoc=（项）=>（{items}）=>(

{items.map（（项，索引）=>(
))}

);
const Type1List=ListHoc（ItemHoc（ItemType1））；
const Type2List=ListHoc（ItemHoc（ItemType2））；
常量应用=（）=>{
常量项=[1,2,3]；
返回(
);
};
ReactDOM.render（，document.getElementById（'root'））
谢谢@HMR！花了好几次时间才弄明白到底发生了什么，但效果很好。HOC开启了一个全新的可重用性级别。再次感谢！