时间戳

首页 > 解决方案 > 懒惰渲染孩子

reactjs - 懒惰渲染孩子

问题描述

看看这个简单的例子：

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

Layoutchildren组件仅在loadingis时呈现false。但这里的问题是立即React解决Layout孩子。因为entityis null(while loading=true) 我得到它无法读取name的错误null。有没有一种简单的方法来避免这个错误，因为它span总是在entity不是时呈现null？

目前我知道3个选项：

  1. 将其span移至stateless function接收entity为prop
  2. 将整个包裹进去然后支撑children在里面Layoutfunctionfunction childrenLayout
  3. 只需使用{entity && <span>Name: {entity.name}</span>}

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

标签： reactjsnullcomponentslazy-evaluationchildren

解决方案

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

对我有用的是将孩子作为函数传递：

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


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

虽然它仍然不完美。

推荐阅读