是否可以在反应组件中使用条件？

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>
    )
  }
/>;

有关组件可用道具的更多详细信息，请参阅文档。