在三元运算中使用react JSX和HTML，无法使其正确显示

Question

变量 twitter_username 解析为用户名或 null。

 {{twitter_username}?<p>@{twitter_username}</p>:null}

我希望如果有用户名则显示@username，如果值为空则根本不显示任何内容。如果有用户名，它会显示正常，但如果返回为空，我会得到一个 @ 而不是什么都没有。

 {{twitter_username}?<p>{twitter_username}</p>:null}

如果有用户名，则此代码返回用户名；如果没有，则此代码为空。

Answer 1

一个很好又简单的方法{ twitter_username && (<p>@{twitter_username}</p>) }这里，仅当第一部分 (twitter_username) 已定义时，三元运算符的左侧部分才会继续向右。右边部分是return语句，返回jsx