你如何用JSX / ES6简写做if else语句？

Question

我的数据看起来像这样

{
 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> }

Answer 1

你的假设非常好。

你可以这样做：

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

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

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

@a_programmer在评论中指出：＆＃34;使用react 16 / fiber，您也可以使用<React.fragment>代替<div>来保持dom干净＆＃34;

Answer 2

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

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

或者如果你不这样做：

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