reactjs - 惰性渲染 child

Question

看一下这个简单的例子:

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

Layout组件正在渲染其 children仅当loading时是 false 。但这里的问题是React正在解决Layout children 立即。自 entity是 null (而 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作为函数并解析 block 稍后在渲染之前？

Answer 1

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

对我有用的是将 child 作为函数传递:

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


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

虽然还不够完美。