如何使用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>