"空"组件的最佳实践 - null？空div？(必须返回有效的React元素(或null))

Question

我使用的打字稿及一个项目的反应,我有嵌套组件在那里我只希望内部成分导致内容的情况下,如果某些条件为真.

例如:

export const SomeOverview = (info) => {
  ... // some data manipulation
  return (
     <div>
        <div><.... a bunch of stuff</div>
        <SomeDetail data={data}/>
     </div>
  )
}

export const SomeDetail = (info) => {
    ...
    if (<some condition using info) {
        return (
            <div>
                <some content using info>
            </div>
        )
    }
    return null or <div/> ?
}

如果我不进入if语句,或者我得到react元素错误,我不能不返回任何内容.

所以现在我尝试了一个空的div,但它看起来有点像黑客.是否有"更好"的完成方式？

Answer 1

返回null是要走的路.

从官方文档:

在极少数情况下,您可能希望组件隐藏自身,即使它是由另一个组件呈现的.要执行此操作,请返回null而不是其渲染输出.

https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering