Javascript 条件呈现无法正确显示我的数据

我有一个组件，用于在名为UserRow的材质ui表上显示数据

此组件用于另一个名为用户的组件

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

有没有办法只调用一次

组件，就可以得到与下面图片中相同的结果

用户行：

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

导出默认函数UserRow（props，{name，details}）{
常量样式=样式（）；
函数用户名（道具）{
const showUserRow=props.showUserRow；
if（showUserRow）{
返回
{props.userRow}
}
返回；
}
功能图标链接（道具）{
const showDetailsRow=props.showDetailsRow；
如果（showDetailsRow）{
返回
;
}
返回；
}
返回(
)
}

用户：

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

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

导出默认函数用户（{data}）{
常量样式=样式（）；
const userList=data.map（（行）=>{
返回{name:row，details:row}；
});
常量[状态]=React.useState({
用户：[
…用户列表，
]
});
返回(
(
)
},
{
标题：“详情”，
字段：“详细信息”，
渲染：rowData=>(
)
},
]}
数据={state.users}
选择权={{
搜索：正确
}}
/>
)
}

我以前的经历：

用户行：

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

导出默认函数UserRow（props，{name，details}）{
常量样式=样式（）；
返回(
{name}
)
}

用户：

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

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

返回(
(
)
},
{
标题：“详情”，
},
]}
数据={state.users}
选择权={{
搜索：正确
}}
/>
)
}

在前面的解决方案中，这里的问题是，如果我们创建一个标题详细信息，则material ui表会为详细信息创建一个div，而我不能将图标放在那里，如果我有更多数据并且需要将数据放在相应的位置，这将是一个问题

我试图通过前面的解决方案实现的是减少一些代码，因为如果我有很多字段，我将重复太多的代码

可能有用的链接：