Компонент возвращает null. Не тенарный оператор. Пример должен показать именно это.

[bscheshirwork]

learn-reactjs/src/main/webapp/WEB-INF/pages/basics/conditionalRendering/conditionalRendering.jsp

Line 125 in d68443a

<ce:code-example-8 codePenUrl="https://codepen.io/stzidane/pen/owgRPg?editors=0010"/>

  function DangerAlert(props) {
    return (
      <h3 className="alert alert-danger">{props.text}</h3>
    );
  }
          {this.state.isDangerAlertShowed ?
              <DangerAlert text={'Внимание! В приложении возникли некоторые проблемы!'} /> : null}

тогда как в https://ru.reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Предупреждение!
    </div>
  );
}

        <WarningBanner warn={this.state.showWarning} />

[stsiushkevich]

Здравствуйте! На самом деле пример на моём сайте и оригинал - оба отражают отрисовку компонента по условию. Я использовал тернарный оператор, так как компонент DangerAlert намеренно максимально прост и не содержит никаких условий. Я вынес это условие из него наружу. Условие, показывать DangerAlert или нет определяет именно внешний код. Тернарный оператор удобнее тем, что сокращает код.

Кстати, есть запись ещё короче:

{this.state.isDangerAlertShowed && <DangerAlert/>}

Именно такую запись я использую почти всегда в своём коде.

[bscheshirwork]

На самом деле пример на моём сайте и оригинал - оба отражают отрисовку компонента по условию.

Насколько помню ситуацию (а помню плохо, за давностью), там нужно показать что возвращается, а не как делать удобнее