懒惰的渲染孩子

Question

看看这个简单的例子：

 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视为函数并在内部解析块吗？

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>

虽然它仍然不完美。