Ленивый рендеринг детей
Взгляните на этот простой пример:
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
Я просто наткнулся на ту же проблему.
Что сработало для меня, так это передача детей как функции:
ready: boolean;
children?: () => ReactNode,
}> = ({ ready, children }) => {
return (
<div>{
ready ?
children() :
(
<div>not ready</div>
)
}</div>
);
};
<Layout loading = {loading}>
{() =>
<span>Name: {entity.name}</span>
}
</Layout>
Хотя все еще не идеально.
какая цель? ленивая загрузка? запрашивать файл фрагмента только тогда, когда пользователь достигает компонента? Или запрашивать чанк, только если включена загрузка var?