我 react 过来,有这个:
return (
<p title={ 'name' }> TEST </p>
)
我想在 return
中执行一个 if
语句。我测试了这个:
return (
<p title={ 'name' }> TEST </p>
if (variable) {
<p> hello </p>
} else {
<p> world </p>
}
)
显然,我不知道自己在做什么。什么是正确的做法?抱歉这个入门级问题。
最佳答案
您可以使用 ternary operator (?
) ,并且您还必须有一个包装器元素来包含两个单独的段落(标题和内容),因此简单的返回将是:
render() {
return (
<div>
<p title={'name'}> TEST </p>
<p> { variable ? "hello" : "world" } </p>
</div>
)
}
为了可读性,最好拆分“一行”:
// ...
<p>
{
variable ? (
<em style={{color: 'black'}}>hello</em>
) : (
<em>world</em>
)
}
</p>
// ...
然而,它并不总是那么简单,所以我建议使用占位符变量,例如:
render() {
var $content;
if(variable) {
$content = (<p>hello</p>);
}
else {
$content = (<p>world</p>);
}
return (
<div>
<p title={'name'}> TEST </p>
{$content}
</div>
)
}
关于javascript - 在 react 中,我如何做一个 if 语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56629919/