如果在React

Question

我有一个json文件，其中的数据已传递到组件中。有些对象具有所有3个变量，而有些则缺少一些数据。我们要显示类似以下内容：

-爱丽丝，华盛顿州西雅图

但是如果西雅图和华盛顿不存在，我们只想显示

-爱丽丝

反之亦然。如果不存在，请隐藏连字符。最干净的方法是什么？

 <div>
     - {item.name}, {item.city} {item.state}
 </div>

Answer 1

也许您可以通过以下方式解决此问题：

 <div>
     - {item.name} { (item.city && item.state) && `, ${item.city} {item.state}` }
 </div>

Answer 2

您可以这样做

<div>
   - {item.name + (item.city ? ', ' + item.city : '') + (item.state ? ' ' + item.state : '')}
<div>

或者您可以进一步简化

<div>
   - {item.name} { (item.city && item.state) && `, ${item.city} {item.state}` }
</div>

Answer 3

const address = `${item.name}, ${item.city} ${item.state}`
  ? `-${item.name}, ${item.city} ${item.state}`
  : null;

显示如下：

{地址}