“空”组件的最佳实践 - null？空div？ （必须返回有效的React元素（或null））

Question

我正在使用typescript并对项目做出反应，我有一个嵌套组件的情况，我只希望内部组件导致内容如果某些条件为真。

例如：

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