Условный вывод

В React вы можете создавать отдельные компоненты, которые инкапсулируют необходимое поведение. Затем вы можете отображать только некоторые из них, в зависимости от состояния вашего приложения.

Условный вывод в React работает так же, как и условия в JavaScript. Используйте операторы JavaScript, такие как if или условный оператор условный оператор, чтобы создавать элементы, представляющие текущее состояние, и позволять React обновлять интерфейс пользователя в соответствии с ними.

Рассмотрим эти два компонента:

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

Мы создадим компонент Greeting, который отображает любой из этих компонентов в зависимости от того, авторизован ли пользователь:

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;

    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.

Встраиваемое условие с логическим оператором &&

Вы можете встраивать выражения в 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 проигнорирует и пропустит его.

Обратите внимание, что возврат ложного выражения по-прежнему приведет к пропуску элемента после &&, но вернёт ложное выражение. В примере ниже метод render вернёт <div>0</div>.

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}

Встраиваемое условие if-else с условным оператором

Другой метод условного отображения элементов в строке — использование условного оператора JavaScript condition ? true : false.

В примере ниже мы используем его для условного отображения небольшого блока текста.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

Он также может использоваться для больших выражений, хотя не сразу понятно, что происходит:

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(state => ({
      showWarning: !state.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

Возврат значения null из метода render компонента не влияет на срабатывание методов жизненного цикла компонента. Например, componentDidUpdate всё равно будет вызван.