`return false && <div />` 实际上返回了什么？为什么它不会破坏我的 React 代码？答案

【问题标题】：What does `return false && <div />` actually return? Why does it not break my React Code?`return false && <div />` 实际上返回了什么？为什么它不会破坏我的 React 代码？
【发布时间】：2020-05-15 15:15:25
【问题描述】：

const Test = () => {
  return (
    false && <div> hello </div>
  )
}

这不会返回<div>hello</div>，因为第一个操作数（字面意思）是false。但是在 React 中使用 this 时返回的是什么？为什么这不会破坏我的代码？

到目前为止，我总是这样做：

if (condition) { 
   return <div>hi</div>
 } else {
   return </>
}

不过好像没问题

   return condition && <div>hi</div>

这里有什么陷阱吗？

【问题讨论】：

它返回false。为什么会破坏你的 React 代码？参见例如reactjs.org/docs/….

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

boolean 是一个有效的 React 节点类型；这是打字稿中的所有有效类型：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

function App(){
 console.log("rendered correctly")
 return false
}

ReactDOM.render(<App/>, root)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

是的。该文档只是在 DOM 中呈现为<div id="root"></div>，就好像<App/> 不存在一样。