如何在 JSX/ES6 简写中执行 if else 语句？答案

【问题标题】：How do you do an if else statement in JSX/ES6 shorthand?如何在 JSX/ES6 简写中执行 if else 语句？
【发布时间】：2018-01-12 15:41:10
【问题描述】：

我的数据是这样的

{
 foo1: { name: 'Sara', rep: 'John' },
 foo2: { name: 'Bob'},
 foo3: { name: 'Mike', rep: 'Ray'}
}

如果有代表，我的目标是同时显示代表和名称，并且只显示名称

JSX 返回

 if (rep) {
   <b> {rep}(rep)</b>
     <p>{name}<p/>
   } else {
   <b>{name}</b>
  }

假设是这样的

 {rep ? <b>{rep}(rep)</b><p>{name}</p> : <b>{name}</b> }

【问题讨论】：

【解决方案1】：

你的假设很好。

你可以这样做：

{rep ?
    (
        <div>
            <b>{ rep } (rep)</b>
            <p>{ name }</p>
        </div>

    )    
: (
    <b>{ name }</b>
)}

您只能返回一个 HTML 元素，因此您需要将 b 和 p 标记包装到 div 中。

正如@a_programmer 在 cmets 中指出的那样：“使用 react 16/fiber 您还可以使用 <React.fragment> 而不是 <div> 来保持 dom 清洁”

【讨论】：

【解决方案2】：

假设您将始终拥有您可以执行以下操作的名称：

return(
  <span>
    {rep && <b>{rep}</b>}
    <p>{name}</p>
  </span>
)

如果你不这样做：

return(
  <span>
    {rep && <b>{rep}</b>}
    {name && <p>{name}</p>}
  </span>
)

【讨论】：