如何使用 Material-ui 基于 if 语句 hide/show 列？

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

注意：由于您使用 table 来显示数据，因此它应该具有固定数量的 th 标签 - table 标题，从而完全删除 table 个单元格可能是一个糟糕的解决方案。

您也可以根据条件将 table 单元格留空，例如 <TableCell align="center" >{condition && servicesCode[key]}</TableCell> 或喜欢 <TableCell align="center" >{condition ? someVariable : "No data here"}</TableCell>

如何使用 Material-ui 基于 if 语句 hide/show 列？

How to hide/show column based on if statement using Material-ui?

javascript

show-hide

reactjs

material-ui