Question

看看这个简单的例子：

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

Layout组件仅在children为loading时才呈现其false。但是这里的问题是React正在立即解决Layout个孩子。由于entity是null（而loading=true时），我收到一个错误，它无法读取name中的null。是否有一种简单的方法来避免此错误，因为在span不是entity时将始终呈现此null吗？

目前，我知道3种选择：

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

为什么我必须使用这些选项之一，并且可以使children视为那些{{1}}作为函数并稍后在渲染之前解析其中的块？

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>

尽管它仍然不完美。

反应懒惰的渲染孩子

1 个答案: