Тэг срабатывает быстрее, чем условие в react компоненте, как исправить?

Question

[Алексей]

Реакт компонент:

export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}

Как я понимаю, со статичными props.children отрабатывает нормально, но со следующей строкой проблемы:

<Downloading isDownload={isDownload}>
  <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />
</Downloading>

Объект data.current.weather[0].icon загружается асинхронно и на момент начала рендеринга - этого объекта не существует - сразу вылетает ошибка "Cannot read properties". Как я понимаю сначала отрабатывает строка в тильде, а только потом начинается проверка условия в компоненте Downloading

Как-то можно сделать так, чтобы сначала отрабатывало условие в Downloading компоненте, а только потом переходило к обработке тега img?

Answer 1

[Михаил]

Вроде того

export default function Downloading(props) {
  return (
    <>
      {
        props.isDownload
        ? <>{props.children()}</>
        : <div>Загрузка...</div>
      }
    </>
  )
}



<Downloading isDownload={isDownload}>
  {() => <img src={`http://openweathermap.org/img/wn/${data.current.weather[0].icon}@4x.png`} alt="Weather" />}
</Downloading>

https://reactjs.org/docs/render-props.html#using-p...

должно работать

Comments

[Алексей]

Спасибо, помогло)