- PVSM.RU - https://www.pvsm.ru -
Перевод официальной документации библиотеки React.js на русском языке.
1 — Часть первая — Установка [1]
2 — Часть вторая — Внедрение JSX [2]
3 — Часть третья — Отрисовка элементов [3]
4 — Часть четвертая — Компоненты и свойства [4]
5 — Часть пятая — Состояние и жизненный цикл [5]
6 — Часть шестая — Обработка событий [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 [7].
Данный пример отображает различные приветствия в зависимости от значения опоры 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 [8].
Ввод переменной и оператора "if" — отличный способ для условного отображения компонента, но, возможно, вы захотите использовать более короткий синтаксис. Ниже представлены несколько способов как встроить условия в JSX.
Вы можете встроить любые выражения в 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 [9].
Это работает, потому что в JavaScript «true && expression» всегда определяет "expression", а "false && expression" всегда определяет "false". Поэтому, если условие "True", то на выходе появится элемент, который был после &&. Если условие "false", то React проигнорирует и пропустит его.
Другой способ для условного ввода отображающихся элементов -использование условного оператора «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 [10].
Автор: html_manpro
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/217400
Ссылки в тексте:
[1] Часть первая — Установка : https://habrahabr.ru/post/315466/
[2] Часть вторая — Внедрение JSX: https://habrahabr.ru/post/315630/
[3] Часть третья — Отрисовка элементов: https://habrahabr.ru/post/315716/
[4] Часть четвертая — Компоненты и свойства: https://habrahabr.ru/post/315922/
[5] Часть пятая — Состояние и жизненный цикл: https://habrahabr.ru/post/316262/
[6] Часть шестая — Обработка событий: https://habrahabr.ru/post/316600/
[7] CodePen: https://codepen.io/gaearon/pen/ZpVxNq?editors=0011
[8] CodePen: https://codepen.io/gaearon/pen/QKzAgB?editors=0010
[9] CodePen: https://codepen.io/gaearon/pen/ozJddz?editors=0010
[10] CodePen: https://codepen.io/gaearon/pen/Xjoqwm?editors=0010
[11] Источник: https://habrahabr.ru/post/316896/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.