Из компонента 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}
}
}





Двумя способами: определить метод shouldComponentUpdate или использовать чистый компонент.
Потомок, который возвращает null в render, не отображается в DOM. Это уже сделано в исходном коде, но есть проблемы с синтаксисом.
Скобки следует использовать только внутри JSX-элементов для обертывания JS-выражений. Здесь они рассматриваются как литералы объекта:
return {isExist ? <div>Yes</div> : null}
Должен быть:
return isExist ? <div>Yes</div> : null
Тогда это работает как задумано.
См. Примеры в lucybain.com/blog/2018/react-js-pure-component.