Перевод официальной документации библиотеки React.js на русском языке.
Оглавление:
1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая
7 — Часть седьмая — Условный рендеринг
8 — Часть седьмая (скоро)
Условный рендеринг
В React вы можете создавать отдельные компоненты, которые воплощают нужную вам модель поведения. Затем можно будет отобразить только некоторые из них, в зависимости от состояния приложения.
Условный рендеринг в React работает точно так же, как и в JavaScript. Используйте операторы JavaScript, как "if" или условный оператор для создания элементов, которые отображают текущее состояние, и чтобы позволить React обновлять пользовательский интерфейс, чтобы им соответствовать.
Рассмотрим данные составляющие:
function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } Мы создадим отельный компонент, который будет отображать оба вышеуказанных компонента в зависимости от того, вошел ли пользователь в систему:
function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } ReactDOM.render( // Try changing to isLoggedIn={true}: <Greeting isLoggedIn={false} />, document.getElementById('root') ); Попробуйте на CodePen.
Данный пример отображает различные приветствия в зависимости от значения опоры isLoggedIn.
Элемент переменных
Вы можете использовать переменные для хранения элементов. Это может помочь вам условно вынести часть компонента, в то время как остальные выходные данные не изменятся.
Рассмотрим два новых компонента, представляющие кнопки Входа и Выхода:
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') ); Попробуйте на CodePen.
Ввод переменной и оператора "if" — отличный способ для условного отображения компонента, но, возможно, вы захотите использовать более короткий синтаксис. Ниже представлены несколько способов как встроить условия в JSX.
Как встроить «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') ); Попробуйте на CodePen.
Это работает, потому что в JavaScript «true && expression» всегда определяет "expression", а "false && expression" всегда определяет "false". Поэтому, если условие "True", то на выходе появится элемент, который был после &&. Если условие "false", то React проигнорирует и пропустит его.
Как встроить «If-Else» с помощью условного оператора
Другой способ для условного ввода отображающихся элементов -использование условного оператора «condition? true: false» в JavaScript. В приведенном ниже примере, мы используем его для того, чтобы условно отобразить небольшую часть текста.
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div> ); } It can also be used for larger expressions although it is less obvious what's going on: render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); } Как и в JavaScript выбор стиля текста полностью зависит от вас. Также помните, что если условия становятся слишком сложными, можно извлечь тот или иной компонент.
Как уберечь компонент от рендеринга
В редких случаях может потребоваться спрятать компонент, даже если он был отображен другим компонентом. Для этого верните "null" вместо его выходных данных. В приведенном ниже примере компонент "WarningBanner" отображается в зависимости от значения флага, в данном случае "warn". Если значение флага "false", то компонент не отображается.
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') ); Попробуйте на CodePen.
ссылка на оригинал статьи https://habrahabr.ru/post/316896/
Добавить комментарий