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 проігнорує та пропустить його.
Іншим методом для умовного рендерингу елементів є використання тернарного оператора 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 все одно буде викликаний.