确定React组件是否为空。

Question

我有一个组件，如果满足一些条件就会渲染，否则就返回null。

我想知道如何确定该组件是否从其父级返回了null。

我尝试记录该组件以查看在渲染或返回null时哪些属性会更改，但无法检测到任何差异。

有什么建议吗？

- oldo.nicho

---

想知道为什么您要从父级确定 null？ - Davin Tryon

是的，您应该能够仅使用CSS来完成此操作。由于组件是模块化的，只有它们“知道”是否返回“null”。这是抽象中的重要边界。您可能可以提取一个渲染函数，然后检查结果，但这通常不是一个好的模式。 - Davin Tryon

你说得对，Davin。谢谢 :-) - oldo.nicho

可能是重复的问题：有没有办法判断React元素是否呈现“null”? - Stenerson

对于任何来到这里的人，我建议采用Ben Alpert的方法：https://dev59.com/CFwY5IYBdhLWcg3wATtt#39060039 - Stenerson

Answer 1

您可以使用fallback属性。

而不是：

function Child(){
 if(something) return null

 return <div>content</div>
}

function Parent(){
 // try to find out if child is null
 return <Child />
}

只需要做：

function Child({ fallback = null }){
 if(something) return fallback

 return <div>content</div>
}

function Fallback() {
 return 'some fallback'
}

function Parent(){
 return <Child fallback={<Fallback />} />
}

- Aral Roca