您如何在JSX / ES6速记中进行if else语句？

Question

My data looks like this

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

My goal is do display both rep and name if there is rep and just display name

JSX return

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

Assuming something like this

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

Answer 1

Your assumption is pretty good.

You could do something like this:

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

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

You can only return one HTML Element so you need to wrap the b and p tag into a div .

As @a_programmer pointed out in the comments: "With react 16/fiber you can also use <React.fragment> instead of <div> to keep the dom clean"

Answer 2

Assuming you will always have the name you could do something like:

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

Or if you don't:

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