javascript - 如何使用Material-ui基于if语句隐藏/显示列？

我有以下代码，并且我想基于if语句隐藏或显示TableCell，我该怎么做？

我正在使用MATERIAL-UI：https://material-ui.com/

  <TableBody>
                {Object.entries(servicesCode).map(([key, value]) => (
                  servicesValueTotal[key] = ((servicesValue[key] + servicesTaxe[key])),
                  <TableRow key={servicesCode[key]}>
                    <TableCell component="th" scope="row">
                      {key}
                    </TableCell>
                    <TableCell align="center" >{servicesCode[key]}</TableCell>
                    <TableCell align="center">{servicesValue[key]}</TableCell>
                    <TableCell align="center">{servicesTaxe[key]}</TableCell>
                    <TableCell align="center">{servicesValueTotal[key]}</TableCell>
                    <TableCell align="center">{servicesTec[key]}</TableCell>
                    <TableCell align="center">{servicesClient[key]}</TableCell>
                    <TableCell align="center">{servicesStatus[key]}</TableCell>
                  </TableRow>
                ))}
              </TableBody>

最佳答案

为什么不使用称为条件渲染的功能？

{condition && <Component />}，
例如{condition && <TableCell align="center" >{servicesCode[key]}</TableCell>}

注意：当您使用表来显示数据时，它应该具有固定数量的th标记-表标题，因此，完全删除表单元格可能是一个不好的解决方案。

您还可以根据条件将表格单元格留空
<TableCell align="center" >{condition && servicesCode[key]}</TableCell>或类似<TableCell align="center" >{condition ? someVariable : "No data here"}</TableCell>