根据状态在每行上动态隐藏/显示图标答案

【问题标题】：Dynamically hide/show icon on each rows based on the status根据状态在每行上动态隐藏/显示图标
【发布时间】：2021-03-10 02:11:10
【问题描述】：

场景：我想在 STATUS = APPROVED 时隐藏批准按钮，否则显示批准按钮。

查看以下代码

const [data, setData] = useState([
{ID: 1, STATUS: "APPROVED"},
{ID: 2, STATUS: "FOR APPROVAL"},
{ID: 3, STATUS: "REJECTED"}]);


<MaterialTable
  icons={tableIcons}
  columns={columns}
  data={data}
  title="List of Advisory"
  style={{overflowX: 'auto'}}
  actions={[
    {
      icon: tableIcons.Edit,
      tooltip: 'Edit Advisory',
      onClick: (event, rowData) => selectedAdvisory(rowData, 'Edit')
    },
    {
            icon: tableIcons.Delete,
            tooltip: 'Delete Advisory',
            onClick: (event, rowData) => selectedAdvisory(rowData, 'Delete')
    },
    {
            icon: tableIcons.ThumbsUpDownIcon,
            tooltip: 'Approved/Disapproved Advisory',
            onClick: (event, rowData) => selectedAdvisory(rowData, 'ApproveDisapprove')
    },
    {
            icon: tableIcons.PageviewIcon,
            tooltip: 'Preview',
            onClick: (event, rowData) => alert('You are about to view' + rowData.ADVISORYID)
    }
]}
localization={{
                header:{actions:'Actions'}
            }}
/>

我只想在第 2 行和第 3 行显示批准图标，因为它们是尚未批准的行。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在阅读了一些关于其他相关问题的 cmets 后找到了答案。

Hide/Unhide actions icons based on state.vallue value reactjs

【讨论】：

【解决方案2】：

我还没有在 codepen 或类似的东西上运行它。有没有办法可以托管它？

我想你应该没有问题在这里使用三元运算符？

data.status === "APPROVED" ? <(true) SHOW THIS> : <(false) SHOW THIS INSTEAD>

将行包装在三元运算符中-将要显示的部分放在第一部分（真实部分）中，将未批准时要显示的部分放在第二部分中。

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

【讨论】：