[英]Is it possible to use conditional inside a react component?
Im using Material UI and CardHeader is a component (the top part of a post).我使用 Material UI 和 CardHeader 是一个组件(帖子的顶部)。 I want to render 2 button on the post if the post ( isUser = true
)is posted by the user.如果帖子( isUser = true
)由用户发布,我想在帖子上呈现 2 按钮。 Is that possible?那可能吗?
<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>
)}
/>
Assuming you want those buttons to appear in the card header's action area, you just need to assign them to the action
prop...假设您希望这些按钮出现在卡片标题的操作区域中,您只需将它们分配给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>
)
}
/>;
For more details on the component's available props, see the documentation .有关组件可用道具的更多详细信息,请参阅文档。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.