在三元操作中使用 React JSX 和 HTML 无法正确显示答案

【问题标题】：Using react JSX and HTML in a ternary operation and cannot get it to display it correctly在三元操作中使用 React JSX 和 HTML 无法正确显示
【发布时间】：2020-11-11 22:56:15
【问题描述】：

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

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

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

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

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

【问题讨论】：

这能回答你的问题吗？ if-else statement inside jsx: ReactJS
{twitter_username} 创建一个对象{ twitter_username: twitter_username }，它在 JS 中总是真实的。

标签： javascript html reactjs jsx

【解决方案1】：

一个不错的简单方法{ twitter_username && (<p>@{twitter_username}</p>) }

这里三元运算符的左边部分只有在第一部分（twitter_username）被定义的情况下才会继续向右。右边是返回jsx的return语句

【讨论】：