Question

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

现有代码如下所示。

import List from 'material-ui/List';
import DashboardIcon from 'material-ui-icons/Dashboard';
import BuildIcon from 'material-ui-icons/Build';
import Listings from './BarComponents';


function SideBar() {
  return (
    <div>
      <List>
          <ListItem button>
          <ListItemIcon>
            <DashboardIcon />
          </ListItemIcon>
          <ListItemText primary="Dashboard" />
        </ListItem>

        <ListItem button>
          <ListItemIcon>
            <BuildIcon />
          </ListItemIcon>
          <ListItemText primary="Control Panel" />
        </ListItem> 
      </List>
    </div>
  );
}

export default SideBar;

我希望避免重复创建列表项，以便我创建了一个新文件并将道具传入，代码如下。

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>
  );
}

还有这个

    <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>

是传递组件的最佳方法，例如并通过提前致谢。

Answer 1

您可以使用动态组件。

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>
  );

}

如何避免使用React组件的DRY代码

1 个答案: