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

标签 javascript reactjs material-ui show-hide

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

最佳答案

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>

关于javascript - 如何使用 Material-ui 根据 if 语句隐藏/显示列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61526896/

相关文章:

javascript - 使用通知 API 时如何向通知添加 URL?

javascript - InputEvent.dataTransfer 始终为 null

javascript - React 会在状态更改时丢弃排队事件吗?

reactjs - 如何在 React 中覆盖material-ui-next css?

javascript - 如何在 Material UI 自动完成中仅显示无选项文本

javascript - meteor 客户端访问现有的 mongoDB

javascript - react esLint 错误 : Missing "key" prop for element in array

javascript - 上传到 heroku 后,移动 @media 查询不起作用

javascript - 使用 React.JS 预填充表单

reactjs - ReactWrapper::state() 只能在类组件 Unit Testing Jest 和 Enzyme 上调用