是否可以在反應組件中使用條件？

Question

我使用 Material UI 和 CardHeader 是一個組件（帖子的頂部）。 如果帖子（ isUser = true ）由用戶發布，我想在帖子上呈現 2 按鈕。 那可能嗎？

            <CardHeader
                avatar={
                    <Avatar sx={{ bgcolor: "red" }} aria-label="recipe">
                        U
                    </Avatar>
                }

                title={username}
                
                {isUser && (
                    <Box display="flex">
                        <IconButton onClick={handleEdit} sx={{ marginLeft: "auto" }}>
                            <EditIcon />
                        </IconButton>
                        <IconButton onClick={handleDelete}>
                            <DeleteForeverIcon />
                        </IconButton>
                    </Box>
                )}
            />

Answer 1

假設您希望這些按鈕出現在卡片標題的操作區域中，您只需將它們分配給action道具...

<CardHeader
  avatar={
    <Avatar sx={{ bgcolor: "red" }} aria-label="recipe">
      U
    </Avatar>
  }
  title={username}
  action={
    isUser && (
      <Box display="flex">
        <IconButton onClick={handleEdit} sx={{ marginLeft: "auto" }}>
          <EditIcon />
        </IconButton>
        <IconButton onClick={handleDelete}>
          <DeleteForeverIcon />
        </IconButton>
      </Box>
    )
  }
/>;

有關組件可用道具的更多詳細信息，請參閱文檔。