Ты можешь предотвратить рендеринг компонента, возвращая null в зависимости от определённого условия. Такой подход позволяет сделать условный рендеринг без отображения DOM-элементов.
Самый распространённый способ — проверить условие в логике рендеринга компонента и вернуть null, если условие не выполняется:
function Greeting(props) {
if (!props.loggedIn) {
return null;
}
return (
<div className="greeting">
Welcome, {props.name}
</div>
);
}
Вот полный пример, который показывает, как родительский компонент управляет рендерингом дочерних компонентов:
class User extends React.Component {
constructor(props) {
super(props);
this.state = { loggedIn: false, name: 'John' };
}
render() {
return (
<div>
<Greeting loggedIn={this.state.loggedIn} name={this.state.name} />
<UserDetails name={this.state.name} />
</div>
);
}
}
loggedIn равен false, компонент Greeting проверяет условие и возвращает nullnull как допустимое значение и пропускает рендеринг этого компонента полностьюdiv-амиВозвращение null из React компонента — это валидный подход, который предотвращает рендеринг компонента и создание любых DOM элементов.
Новый — ещё не проверен сообществом
Вы