小编zhu*_*ber的帖子

看看这个简单的例子：

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

Layout组件children仅在loadingis时呈现false。但这里的问题是立即React解决Layout儿童问题。由于entity是null(while loading=true)，我收到无法读取name的错误null。有没有一种简单的方法可以避免这个错误，因为它span总是会在entity不是时呈现null？

目前我知道 3 个选项：

1. 移动此span以stateless function接收entity作为prop
2. 总结全children的Layout在function后支持function children中Layout
3. 只需使用 {entity && <span>Name: {entity.name}</span>}

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