如何有条件地渲染 mui/material 表中的对象？

Question

我在

Table

中有以下

React

代码：

  {noNfts ? <TableRow>
      <TableCell align="center" colSpan={3}>No NFTs in your wallet</TableCell>
    </TableRow> : nftsData.map((nft, index) => {
    const isItemSelected = isNftSelected(nft.address, parseInt(nft.tokenId));
    const labelId = `enhanced-table-checkbox-${index}`;
    return(
      <TableRow
        hover
        key={nft.id}
        sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
        selected={isItemSelected}
      >
        <TableCell padding="checkbox">
          <Checkbox
            color="primary"
            checked={isItemSelected}
            inputProps={{
              'aria-labelledby': labelId,
            }}
            onClick={(event) => handleClick(event, nft.address, 1, parseInt(nft.tokenId), "1")}
          />
        </TableCell>
        <TableCell align="center">{nft.name}</TableCell>
        <TableCell align="center">{nft.symbol}</TableCell>
        <TableCell align="center">{nft.address}</TableCell>
        <TableCell align="center">{nft.tokenId}</TableCell>
        <TableCell align="center">
          <Button 
            disabled={!isItemSelected} 
            color="primary" 
            variant="contained" 
            onClick={() => approveERC721Token(nft.address, props.smartVaultContract, nft.tokenId)}
          >
            Approve
          </Button>
        </TableCell>
      </TableRow>
  )})}

我想添加一个条件，如果令牌未获批准，则只在

Button

内呈现

TableCell

。

我会做这样的事情：

 {isTokenApproved ? <NewObject> : <Button 
    disabled={!isItemSelected} 
    color="primary" 
    variant="contained" 
    onClick={() => approveERC721Token(nft.address, props.smartVaultContract, nft.tokenId)}
  >
    Approve
  </Button>}

这种方法的问题是

isTokenApproved

变量只是一个，并没有引用我所在的

TableRow

。

如何为任何

TableRow

元素实现相同的行为？