Как в React не показывать кусок компонента?

Question

[Степан]

<Alert bsStyle="warning" onDismiss={this.hideAlertByClick}>
                    <strong>Внимание</strong> - эксперементальный проект, в стадии разработки. Заявленные функции будут подключаться по мере его развития.
</Alert>;

Тот самый опциональный кусочек. Если условие не соблюдается, то его вообще не отрисовывать

Answer 1

[Александр]

{!this.state.showAlert || <Alert bsStyle="warning" onDismiss={this.hideAlertByClick}>
                    <strong>Внимание</strong> - эксперементальный проект, в стадии разработки. Заявленные функции будут подключаться по мере его развития.
</Alert>}

Comments

[Степан]

OneFive выглядит не оч

[Александр]

Виталик: Так часто делают, т.к. это самый короткий синтаксис, да и не создавать же на каждый блок свою функцию.

[Александр]

Виталик: или использовать https://github.com/wix/react-templates

[Степан]

Справедливо

Answer 2

[Никита Гущин]

Если условие небольшое, то можно не выносить в отдельную функцию (как предложил OneFive )

renderAlert() {
  return (
    <Alert bsStyle="warning" onDismiss={this.hideAlertByClick}>
        <strong>Внимание</strong> - эксперементальный проект, в стадии разработки. Заявленные функции будут подключаться по мере его развития.
    </Alert>
  );
}

render() {
  const { showAlert } = this.state;
  return (
    <div>
        <b> Some text </b>
        { showAlert && this.renderAlert() }
    </div>
  );
}

Answer 3

[Александр Прозоров]

Исчерпывающий ответ на ваш вопрос даётся в официальной документации по React.

Comments

[Степан]

Александр Прозоров Можете тыкнуть пальцем где конкретно мой случай?

[Никита Гущин]

Виталик:

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
);

[Никита Гущин]

Виталик: но Вам уже предлагали более краткое решение

[Степан]

А понял свою ошибку. Я изначально тоже так сделал. Но зачем то взял класс в кавычки и поэтому у меня выводилось как текст