Взгляните на этот простой пример:
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 как функцию и разрешить блок внутри позже, дорендеринг?