javascript - 在 react 中，我如何做一个 if 语句

Question

我 react 过来，有这个:

return (
   <p title={ 'name' }> TEST </p>
)

我想在 return 中执行一个 if 语句。我测试了这个:

return (
   <p title={ 'name' }> TEST </p>
   if (variable) {
      <p> hello </p>
   } else {
      <p> world </p>
   }
)

显然，我不知道自己在做什么。什么是正确的做法？抱歉这个入门级问题。

Answer 1

您可以使用 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>
    )
}