javascript - 条件渲染无法正确显示我的数据

Question

我有一个组件可以在名为 UserRow 的材料 UI 表上显示数据。

该组件用于另一个名为 users 的组件。

但是为了在每个字段中正确显示数据，我发现的唯一方法是创建条件渲染，这样我就可以在每个字段中渲染我想要的数据，否则它会被复制。

有没有办法只调用一次<UserRow/>组件并获得与下图中相同的结果？

用户行：

export default function UserRow( props, {name, details}) {

    const style = styles();

    function UserName(props) {
     const showUserRow = props.showUserRow;
     if (showUserRow) {
       return  <ListItem>
                 <ListItemIcon >
                   <PeopleIcon className={style.iconColor}/>
                 </ListItemIcon>
                 <ListItemText className={style.text}>{props.userRow}</ListItemText>
                 </ListItem>

     }
       return<div></div>;
   }


    function IconDetails(props) {
     const showDetailsRow = props.showDetailsRow;
     if (showDetailsRow) {
       return <Link to={`/users/${props.detailsRow}`}>
                <ListItemIcon >
                    <ListAltIcon className={style.iconColor}/>
                </ListItemIcon>
            </Link>;
     }
       return<div></div>;
   }

    return (
       <List>
           <ListItem>
             <UserName userRow={props.name} showUserRow={props.showUserRow}/>
             <IconDetails detailsRow={props.details} showDetailsRow={props.showDetailsRow}/>
           </ListItem>
       </List>
    )
}

用户：

export default function User({ data })  {

  const style = styles();


    const userList = data.map((row) => {
        return { name: row, details: row };
    });


    const [state] = React.useState({

      users: [
        ...userList,
      ]
    });


 return (
  <div>
    <MaterialTable
      icons={tableIcons}
      title={<h1 className={style.title}>Users</h1>}
      columns={[
        {
          title: "Name",
          field: "name",
          render: rowData => (
            <UserRow  showUserRow={true}  showDetailsRow={false} name={rowData.name}  />
          )
        },
        {
          title: "Details",
          field: "details",
          render: rowData => (
            <UserRow  showUserRow={false}  showDetailsRow={true} details={rowData.details}  />
          )
        },
      ]}
      data={state.users}
      options={{
        search: true
      }}
    />
  </div>
)
}

我以前有什么：

用户行：

export default function UserRow( props, {name, details}) {

const style = styles();

return (
  <List>
    <ListItem>
      <ListItemIcon >
        <PeopleIcon className={style.color}/>
      </ListItemIcon>
      <ListItemText className={style.text}>{name}</ListItemText>
      <Link to={`/users/${details}`}>
        <ListItemIcon >
         <ListAltIcon className={style.iconColor}/>
        </ListItemIcon>
      </Link>
    </ListItem>
  </List>
 )
}

用户：

return (
      <div>
        <MaterialTable
          icons={tableIcons}
          title={<h1 className={style.title}>Users</h1>}
          columns={[
            {
              title: "Name",
              field: "name",
              render: rowData => (
                <UserRow   name={rowData.name} details={rowData.details}  />
              )
            },
            {
              title: "Details",

            },
          ]}
          data={state.users}
          options={{
            search: true
          }}
        />
      </div>
    )
 }

这里的问题，在之前的解决方案中，如果我们创建一个标题Details，material-ui表会为details创建一个div，我不能把我的图标放在那里，如果我有更多的数据，这将是一个问题并需要将数据放在相应的位置。

我试图用以前的解决方案实现的是减少一些代码，因为如果我有很多字段，我会重复太多代码。

可能有用的链接：https ://material-table.com/#/docs/get-started

标签： javascriptreactjsmaterial-ui