Как предотвратить рендеринг дочерних компонентов, если они возвращают нуль

Из компонента Parent я передаю реквизиты домена компоненту Child. В Child, если веб-сайт существует с доменом, он возвращает информацию о веб-сайте. В противном случае возвращается null. Когда он возвращает null, я не хочу отображать компонент Child на компоненте Parent.

Как я могу предотвратить его рендеринг?

class Parent extends Component {

  ...

  render() {
    const { domain } = this.props;
    return (
        <div>
            <Child domain = {domain} />
        </div>
    );
  }
}

class Child extends Component {
  ...
  Here, check if the website exists
  ...

  render() {
    const { domain } = this.props;
    const { isExist } = this.state;

    return {isExist ? <div>Yes</div> : null}
  }

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
476
2

Ответы 2

Двумя способами: определить метод shouldComponentUpdate или использовать чистый компонент.

См. Примеры в lucybain.com/blog/2018/react-js-pure-component.

Yossi 14.10.2018 08:18

Потомок, который возвращает null в render, не отображается в DOM. Это уже сделано в исходном коде, но есть проблемы с синтаксисом.

Скобки следует использовать только внутри JSX-элементов для обертывания JS-выражений. Здесь они рассматриваются как литералы объекта:

return {isExist ? <div>Yes</div> : null}

Должен быть:

return isExist ? <div>Yes</div> : null

Тогда это работает как задумано.

Другие вопросы по теме