三元运算符的实现在react中呈现这两个条件

Question

我试图使用三元运算符在react中实现条件渲染，但我似乎无法获得语法正确。下面是我的文字:

const [isDeleted, setIsDeleted] = useState(false);

我有一个删除用户的函数:

const deleteUser = () => {
axios.post("http://localhost:5000/delete", []).then((resp) => {
setIsDeleted(resp.data);
isDeleted(true);
});
};

我在下面调用deleteUser函数onclick，它将isDeleted更改为true。

<Box>
<Button
sx={{
padding: "10px 20px",
}}
onClick={deleteUser}
>
Delete User
</Button>
</Box>

下面，这里想用三元运算，如果isdeleted为真，则显示successfully deleted，如果isdeleted为假，则显示Hello User。我只是把它打印在我的屏幕上。我好像不能理解正确的语法。

<Typography
fontWeight="bold"
>
isDeleted? Successfully Deleted : Hello User
</Typography>

Answer 1

用{}包裹语句

{ isDeleted ? <>Successfully Deleted</> : <>Hello User</>}

Answer 2

缺少括号

<Typography fontWeight="bold">
{isDeleted? "Successfully Deleted" : "Hello User"}
</Typography>

Answer 3

尝试如下:

<Typography fontWeight="bold">
{isDeleted ? `Successfully Deleted` : `Hello User`}
</Typography>

Answer 4

三元是JavaScript表达式。所有这样的表达式都应该被括在括号{}:

中

<Typography fontWeight="bold">
{isDeleted ? "Successfully Deleted" : "Hello User"}
</Typography>

Answer 5

isDeleted是一个属性，你应该使用方法setIsDeleted(resp.data);