使用表达式在JSX中编写javascript

我试图理解在JSX中编写表达式的概念，但无法理解大括号中的javascript怎么不是表达式？

const Welcome()=>{
const isLoggedIn = true;
return(
<div>
{
if(isLoggedIn){
<p>Welcome!</p>
}else{
<p>Please Login</p>
}
}
</div>  
);
}

请指导我，当我们分配一个值isLoggedIn为true，然后进行验证，如果值为true，则打印"欢迎"，否则请登录。

请告诉我这怎么是一个陈述而不是一个表达。

如果要使用if，则必须使用ternary operator，因为java脚本中的if是语句，而不是表达式。

const Welcome = () => {
const isLoggedIn = true;
return (<div>{isLoggedIn ? <p>Welcome!</p> : <p>Please Login</p>}</div>);
}

根据定义，JavaScript中的if语句是语句，而不是表达式。

表达式可以被视为可以分配给变量的代码：

const myVar = 2 + 2;
const otherVar = someFuncCall();

这里，2 + 2和someFuncCall()是表达式，因为它们可以被分配给变量。

if语句不能分配给变量：

const invalidCode = if (someCondition) { "ABC"; } // This code won't run

您可以使用三元运算符，它可以像任何其他运算符(例如+运算符(一样用于创建表达式：

const Welcome = () => {
const isLoggedIn = true;
return(
<div>
{isLoggedIn ? (<p>Welcome!</p>) : (<p>Please Login</p>)}
</div>  
);
}

这个代码有效，因为可以将这个结果分配给一个变量：

const myJsx = isLoggedIn ? (<p>Welcome!</p>) : (<p>Please Login</p>)

相关内容