React js 状态管理 if-else 条件

Question

function App(isTrue){
  if(isTrue)
    return <ComponentA/>
  else
    return <ComponentB/>
}
// what is different if I write like this 
function App(isTrue){
  return(<>
    {isTrue && <Component/>}
    {!isTrue && <ComopnentB/>}
    </>
  )
}

我上面提到的两种不同的写作方式有什么区别？

Answer 1

没有区别，无论哪种情况，都会渲染相同的 jsx - ComponentA。

推理：

a) isTrue 在任何情况下都是真值

// It is an empty object - more specifically

// let us see this below

const isTrue = {}

isTrue ? true : false // will result true

b) !isTrue 将计算为 false 值，React 将在渲染时忽略该值。

c) 片段标签 <> 在生成的 HTML 中没有任何痕迹