В React можно создать отдельные компоненты, которые инкапсулируют необходимое поведение. Затем, отрисовать только из них, которые нужны, в зависимости от состояния вашего приложения.
Условный рендеринг или условная отрисовка в React работает точно так же условные операторы в JavaScript. Используйте операторы JavaScript, if или условные операторы для создания элементов отражающих свое состояние, и React обновит пользовательский интерфейс, чтобы соответствовать этим элементам.
Рассмотрим эти два компонента:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
Мы создадим компонент Greeting
, который отображает какой-либо из этих компонентов, в зависимости от того, зарегистрирован ли пользователь:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Попробуйте поменять isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
Этот пример оказывает различные приветствия в зависимости от значения свойства isLoggedIn.
Элемент переменные
Вы можете использовать переменные для хранения элементов. Это может помочь вам условно вынести часть компонента в то время как остальная часть компонента не меняется.
Рассмотрим эти два новых компонента, представляющие Logout и Login кнопки:
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
В приведенном ниже примере, мы создадим с учетом состояния компонент под названием LoginControl
.
Он будет отрисовывать <LoginButton />
или <LogoutButton /> в зависимости от его текущего состояния. Она также будет отрисовывать <Greeting />
из предыдущего примера:
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
На данный момент, объявление переменной и использование выражения if — прекрасный способ условного рендеринга компонента. Иногда вам может захотеться использовать более короткий синтаксис. Есть несколько способов встраиваемых условий в JSX, объяснение ниже.
IВстраиваемые IF с логическим оператором И &&
Вы можете встраивать любые выражения в JSX путем их оборачивания в фигурные скобки. Это включает в себя логический оператор && JavaScript. Это может быть удобно для условного включения элемента:
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
Это работает, потому что в JavaScript, true && expression всегда имеет значение expression, а false && expression всегда имеет значение ложь (false).
Поэтому, если условие истинно, то элемент сразу после && появится в выводе. Если оно ложно, React игнорирует и пропустит его.
Вставка условного оператора
Другой способ условной отрисовки элементов — использование условного оператора condition ? true : false
.
В примере ниже, мы используем условную отрисовку маленького блока текста.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Он также может быть использован для больших выражений, хотя происходящее становится менее очевидно:
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
Так же, как в JavaScript, вы и ваша команда можете выбрать подходящий стиль, который будете считать более удобным для чтения. Кроме того, помните, что всякий раз, когда условия становятся слишком сложными, это может быть момент подумать о компонентах.
Предотвращение отрисовки компонента
В редких случаях вы можете захотеть чтобы компонент скрыл себя, даже если он был отрисован другим компонентом. Для этого нужно вернуть null при отрисовке.
В приведенном ниже примере <WarningBanner />
компонент отрисовывается в зависимости от свойства под названием warn
. Если значение свойства является ложным, то компонент не показывается:
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);