如何使用 Material-ui 根据 if 语句隐藏/显示列？

Question

我有以下代码，我想根据 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>

Answer 1

let showTableCell = (true) ? true : false; // you can have a single line condition or multiple line condition using if and else here.

 <TableBody>
                {Object.entries(servicesCode).map(([key, value]) => (
                  servicesValueTotal[key] = ((servicesValue[key] + servicesTaxe[key])),
                  <TableRow key={servicesCode[key]}>
                    <TableCell component="th" scope="row">
                      {key}
                    </TableCell>
                    {showTableCell && <TableCell align="center" >{servicesCode[key]}</TableCell>}
                    // or you could also add condition here as well
                    {showTableCell ? <TableCell align="center">{servicesValue[key]}</TableCell> : "Some other data here"}
                    <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>

Answer 2

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

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