Javascript 如何避免React组件出现干代码

目前正在使用React with Material UI v1.0实现列表，但我不想重复我的代码

现有代码如下所示

从“物料界面/列表”导入列表；
从“材质ui图标/仪表板”导入仪表板图标；
从“材料ui图标/构建”导入构建图标；
从“/BarComponents”导入列表；
函数边栏（）{
返回(
);
}
导出默认边栏；

我希望避免重复创建列表项，因此我创建了一个新文件并将道具传递到，代码如下

import React from 'react'
import  { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';

export default function Listings(props) {
  return(
    <div>
      <ListItem button>
        <ListItemIcon>
          <props.icon />
        </ListItemIcon>
        <ListItemText primary={props.prim} />
      </ListItem>
    </div>
  );
}

从“React”导入React
从“物料界面/列表”导入{ListItem、ListItemIcon、ListItemText}；
导出默认功能列表（道具）{
返回(
);
}

还有这个

    <Listings icon={DashboardIcon} prim="Dashboard" />
    <Listings icon={BuildIcon} prim="Build" />

放入原始文件以替换

    <ListItem button>
      <ListItemIcon>
        <DashboardIcon />
      </ListItemIcon>
      <ListItemText primary="Dashboard" />
    </ListItem>

    <ListItem button>
      <ListItemIcon>
        <BuildIcon />
      </ListItemIcon>
   <ListItemText primary="Control Panel" />
  </ListItem>

是传递组件的最佳方式，例如

---

并通过呼叫它，提前谢谢。

您可以使用动态组件

renderElement(name, props = {}) {
  var MyComponent = name
  return <MyComponent {...props} />;
}

render() {

    return(
    <div>
        <ListItem v-for="item in list" key={item.id} button={item.button}>
            <ListItemIcon>
                {renderElement(props.icon)}
            </ListItemIcon>
            <ListItemText primary={props.prim} />
        </ListItem>
    </div>
  );

}

渲染（名称，道具={}）{ var MyComponent=name 返回； } render（）{ 返回( {渲染（道具图标）} ); }

---

旁注：“干代码”通常指的是不重复的、经过深思熟虑的代码。只需使用一个循环，并将每个组件的数据存储在prop数组中即可。下面是一个很好的例子：为了避免干代码，复制并粘贴。太多了。