Как сделать вложенный оператор if else в reactjs JSX?

Я хотел знать, можно ли сделать вложенный if else if in reactjs jsx?

Я пробовал разные способы, и я не могу заставить его работать.

Я ищу 

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

Я пробовал это, но я не могу заставить его рендерить. Я пробовал разные способы. Он всегда ломается, как только я добавляю вложенные if.

  {
          this.state.loadingPage ?
            (<div>loading page</div>) :
            (<div>
               this.otherCondition && <div>title</div>
               <div>body</div>
            </div>)
        }

Обновить

В итоге я выбрал решение, чтобы переместить его в renderContent и вызвать функцию. Оба ответа сработали. хотя. Я думаю, что могу использовать встроенное решение, если оно предназначено для простого рендеринга и renderContent для более сложных случаев.

Спасибо

4 16
javascript reactjs ecmascript-6

4 ответа:

Вам нужно завернуть свой титул и тело в контейнер. Это может быть див. Если вы используете список вместо этого, у вас будет на один элемент меньше в dom.

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}
Я бы не советовал вкладывать троичные утверждения, потому что их трудно читать. Иногда более элегантно "вернуться пораньше", чем использовать Троицу. Кроме того, вы можете использовать isBool && component, Если вам нужна только истинная часть Троицы. 
renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

render() {
  return <div className="outer-wrapper">{ renderContent() }</div>;
}

Предостережение к синтаксису someBoolean && "stuff": Если по ошибке someBoolean установлено в 0 или NaN, то Номер будет передан в дом. Поэтому, если "булевым" может быть ложное число, безопаснее использовать (someBoolean ? "stuff" : null).

23

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

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>
10

Ваш код в альтернативе не является допустимым выражением JavaScript / JSX: 

(
  this.state.someBoolean ?
  (<div>some title</div>):(<div>some other title</div>)
  <div>body</div>
)

Давайте упростим это до 

(
  true ? 42 : 21
  3
)

Это приводит к ошибке

Uncaught SyntaxError: непредвиденное число (...)

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

Вместо этого вы должны вернуть одно значение из ложной ветви условного оператора. Вы можете сделать это, просто поместив его в другой элемент JSX: 

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
    <div>body</div>
  </div>
)

Если вы хотите только показать "тело" когда отображается "какой-то другой заголовок", необходимо переместить <div>body</div> в ложную ветвь условного оператора: 

(
  this.state.someBoolean ?
    (<div>some title</div>) :
    (<div>
       <div>some other title</div>
       <div>body</div>
    </div>)
)

Или, может быть, вы хотите 

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : null}
    <div>body</body>
  </div>
)
5

Как следует из другого ответа, существуют различные способы сделать вложенный if else в react. Какой из них использовать, зависит от ситуации и предпочтений.

На мой взгляд, для лучшей читаемости кода, в этом случае было бы лучше переместить содержимое else в отдельную функцию: 

renderContent() {
     return (
         <div>
             { this.otherCondition && <div>title</div> }
             <div>body</div>
         </div>
     );
}

render() {
    return (
        <div>
            { ... }
            {
                this.state.loadingPage ?
                    <div>loading page</div>
                    :
                    this.renderContent()
            }
            { ... }
        </div>
    )
}

Или если это достаточно просто (в случае, если никакие другие элементы не отображаются), я бы пошел с: 

render() {
    if (this.state.loadingPage) {
        return (
            <div>loading page</div>
        )
    }
    return (
        <div>
            { this.otherCondition && <div>title</div> }
            <div>body</div>
        </div>
    );
}

Вот Статья об условном рендеринге в React , поэтому, пожалуйста, проверьте ее, если вы интересуюсь более подробной информацией по этой теме.

0