在 JSX 中，始终输出标签 A，在有变量 b 有值的时候，需要输出标签 B，你会怎么写这个逻辑？

[myljs]

需求 RT，可能会有下面三种写法：

1:

function Demo() {
  if (b) {
    return <>
      <A />
      <B />
    </>
  }

  return <A />
}

2:

function Demo() {
  return <>
    <A />
    {b ? <B /> : null} // or {b && <B />}
  </>
}

3:

function Demo() {
  let result = [<A key="a" />];
  if (b) {
    result.push(<B key="b" />);
  }

  return result;
}

你会怎么选择？或者用什么其他的方法？以及为什么选择这样写？

[Cbdy]

{b && <B />}
官方推荐

[fuermosi777]

https://reactjs.org/docs/conditional-rendering.html
"it is up to you to choose an appropriate style based on what you and your team consider more readable."

[Mutoo]

其他的方法：
<Notification message={message} />

Notification = ({message})=>{
if(!message) return null;
/* render message */
}

[topgrd]

b && <B />

[zcdll]

2 中的后者，{b && <B />}

[ChefIsAwesome]

跟问人怎么写判断有什么区别？你写 switch，写个 map 查表，套层函数 /组件，不都行么。jsx 妙就妙在它还是 js。

[forzalianjunting]

2 后

[Augi]

@Cbdy 应该是{ !!b && <B>}
b 不是 bool 类型如果是数字 0 会打印出来

[Cbdy]

@Augi 你再仔细想一下

[love]

@Cbdy 是 0 的话是会打出数字啊

[answeryou]

@Cbdy 你应该再想一下

[myljs]

@Cbdy 是 0 的话，是会直接打出数字 !!b 更好，但实际上三元运算符 return null 才是最正统的，因为如果不想渲染任何东西，需要 return null https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering 而 !! 可能会返回组件本身 or false，当然 React 也处理了 false 的情况，用起来是没问题的。

[Augi]

@Cbdy 我想过了，你有本事试一下？

[Cbdy]

@Augi 我错了