懒惰的孩子

Question

看看这个简单的例子：

const List = function({ loading, entity }) {
return (
<Layout loading={loading}>
<span>Name: {entity.name}</span>
</Layout>
);
};

只有当loading是false时，Layout组件才呈现其children。但这里的问题是React正在立即解决Layout儿童的问题。由于entity是null(而loading=true(，我得到错误，它不能读取null的name。有没有一种简单的方法可以避免这个错误，因为这个span总是在entity不是null时渲染的？

目前我知道大约3个选项：

1. 将此span移动到接收entity作为prop的stateless function
2. 将Layout的整个children封装在function中，然后在Layout中支持function children
3. 只需使用{entity && <span>Name: {entity.name}</span>}

为什么我必须使用其中一个选项，我可以使React将这些children视为函数，并在稍后渲染之前解析内部块吗？

Answer 1

我刚刚偶然发现了同样的问题。

对我起作用的是通过儿童作为一种功能：

ready: boolean;
children?: () => ReactNode,
}> = ({ ready, children }) => {
return (
<div>{
ready ?
children() :
(
<div>not ready</div>
)
}</div>
);
};

<Layout loading={loading}>
{() => 
<span>Name: {entity.name}</span>
} 
</Layout>

尽管它仍然不完美。