Как можно рендерить элементы JSX с условным оператором?

Question

Я хочу отобразить HTML-элементы, если данные загружены.

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     )
   }
  </div>
);

Но это показывает ошибку, как показано ниже.

SyntaxError: это зарезервированное слово (60: 35)

60-я строка

<ReviewShortIntro review={{this.state.mainReview}} />

Без условного флага (в коде this.state.isLoaded) я должен проверить, что все свойства обзора не определеныили нет.

Я не знаком с реакцией.

Какой мой лучший способ решения проблемы?

Answer 1

Ваш троичный оператор неполон, у вас есть только левая сторона.Вам не хватает части : null.

Вам нужно обернуть несколько элементов в родительский элемент, чтобы вы возвращали только один элемент.Например, завернутый в <div>:

render() {
  return (
    <div>
      ...
    { this.state.isLoaded ?
     (
        <div><ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} /></div>
     ) : null
   }
  </div>
);

Answer 2

В соответствии с документацией используйте оператор &&, и вы должны заключить его в один элемент.Я рекомендую использовать Fragment, которые не генерируют ненужные элементы dom:

import React, { Fragment } from 'react';

render() {
  return (
    <div>
      ...
    {this.state.isLoaded && (
       <Fragment>
         <ReviewShortIntro review={this.state.mainReview} />
         <div className="clear" />
         <div className="section-title"></div>
         <ReviewList reviews={this.state.reviews} />
       </Fragment>
     )
   }
  </div>
);

Answer 3

Замените это:

<ReviewShortIntro review={{this.state.mainReview}} />

На это:

<ReviewShortIntro review={this.state.mainReview} />

Однако я не мог видеть использование {{}} внутри сообщения, а просто видеть в вашем сообщении об ошибке.Таким образом, вам нужно подтвердить, что вы используете this.state.mainReview внутри одной фигурной скобки.

Двойная фигурная скобка означает, что вы определяете объект.И объект имеет key:value пара.Таким образом, использование {{this.state.mainReview}} вызовет такую ​​ошибку, поскольку такой пары key:value нет.

Хотя в вашем коде это может быть опечатка.Только что ответил, чтобы сообщить, что вызов функции или любого другого состояния должен быть заключен в одну фигурную скобку.

---

Ах, да, ваш троичный оператор неполон.Используйте оператор && или завершите троичный оператор:

{ this.state.isLoaded ?
     (
        <ReviewShortIntro review={this.state.mainReview} />
        <div className="clear" />
        <div className="section-title"></div>
        <ReviewList reviews={this.state.reviews} />
     ) : ''
   }