React.js російською мовою. Частина сьома


Переклад офіційної документації бібліотеки React.js російською мовою.

Зміст:
1 — Частина перша — Установка
2 — Частина друга — Впровадження JSX
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 to changing 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.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.