React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния.
\nУсловный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте условный оператор JavaScript или выражения подобные if.
Рассмотрим два компонента:
\nfunction UserGreeting(props) {\n return <h1>С возвращением!</h1>;\n}\n\nfunction GuestGreeting(props) {\n return <h1>Войдите, пожалуйста.</h1>;\n}Можно создать компонент Greeting, который отражает один из этих компонентов в зависимости от того, выполнен ли вход на сайт:
function Greeting(props) {\n const isLoggedIn = props.isLoggedIn;\n if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}\nReactDOM.render(\n // Попробуйте заменить на isLoggedIn={true} и посмотрите на эффект.\n <Greeting isLoggedIn={false} />, document.getElementById('root'));В этом примере рендерится различное приветствие в зависимости от значения пропа isLoggedIn.
Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, а другая часть компонента остаётся неизменной.
\nРассмотрим ещё два компонента, представляющих кнопки Войти (Login) и Выйти (Logout).
\nfunction LoginButton(props) {\n return (\n <button onClick={props.onClick}>\n Войти\n </button>\n );\n}\n\nfunction LogoutButton(props) {\n return (\n <button onClick={props.onClick}>\n Выйти\n </button>\n );\n}В следующем примере мы создадим компонент с состоянием и назовём его LoginControl.
Он будет рендерить либо <LoginButton />, либо <LogoutButton /> в зависимости от текущего состояния. А ещё он будет всегда рендерить <Greeting /> из предыдущего примера.
class LoginControl extends React.Component {\n constructor(props) {\n super(props);\n this.handleLoginClick = this.handleLoginClick.bind(this);\n this.handleLogoutClick = this.handleLogoutClick.bind(this);\n this.state = {isLoggedIn: false};\n }\n\n handleLoginClick() {\n this.setState({isLoggedIn: true});\n }\n\n handleLogoutClick() {\n this.setState({isLoggedIn: false});\n }\n\n render() {\n const isLoggedIn = this.state.isLoggedIn;\n let button;\n if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; }\n return (\n <div>\n <Greeting isLoggedIn={isLoggedIn} /> {button} </div>\n );\n }\n}\n\nReactDOM.render(\n <LoginControl />,\n document.getElementById('root')\n);Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент if-выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX.
Вы можете внедрить любое выражение в JSX, заключив его в фигурные скобки. Это правило распространяется и на логический оператор && языка JavaScript, которым можно удобно вставить элемент в зависимости от условия:
function Mailbox(props) {\n const unreadMessages = props.unreadMessages;\n return (\n <div>\n <h1>Здравствуйте!</h1>\n {unreadMessages.length > 0 && <h2> У вас {unreadMessages.length} непрочитанных сообщений. </h2> } </div>\n );\n}\n\nconst messages = ['React', 'Re: React', 'Re:Re: React'];\nReactDOM.render(\n <Mailbox unreadMessages={messages} />,\n document.getElementById('root')\n);Приведённый выше вариант работает корректно, потому что в JavaScript выражение true && expression всегда вычисляется как expression, а выражение false && expression — как false.
То есть, если условие истинно (true), то элемент, идущий непосредственно за &&, будет передан на вывод. Если же оно ложно (false), то React проигнорирует и пропустит его.
Есть ещё один способ писать условия прямо в JSX. Вы можете воспользоваться тернарным оператором condition ? true : false.
Вот как этот метод можно использовать, чтобы отрендерить кусочек текста.
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n Пользователь <b>{isLoggedIn ? 'сейчас' : 'не'}</b> на сайте. </div>\n );\n}Этот метод можно использовать и с выражениями покрупнее, но это может сделать код менее очевидным:
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n {isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} />\n : <LoginButton onClick={this.handleLoginClick} /> }\n </div> );\n}Как в JavaScript, так и в React выбор синтаксиса зависит от ваших предпочтений и принятого в команде стиля. Не забывайте, что если какое-то условие выглядит очень сложным, возможно пришло время извлечь часть кода в отдельный компонент.
\nВ редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, верните null вместо того, что обычно возвращается на рендеринг.
Например, будет ли содержимое <WarningBanner /> отрендерено, зависит от значения пропа под именем warn. Если значение false, компонент ничего не рендерит:
function WarningBanner(props) {\n if (!props.warn) { return null; }\n return (\n <div className=\"warning\">\n Предупреждение!\n </div>\n );\n}\n\nclass Page extends React.Component {\n constructor(props) {\n super(props);\n this.state = {showWarning: true};\n this.handleToggleClick = this.handleToggleClick.bind(this);\n }\n\n handleToggleClick() {\n this.setState(state => ({\n showWarning: !state.showWarning\n }));\n }\n\n render() {\n return (\n <div>\n <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}>\n {this.state.showWarning ? 'Спрятать' : 'Показать'}\n </button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Page />,\n document.getElementById('root')\n);Сам факт возврата null из метода render компонента никак не влияет на срабатывание методов жизненного цикла компонента. Например, componentDidUpdate будет всё равно вызван.