Как выполнить вложенный оператор if else в jsjjjjjjjjjj?

Я хотел знать, возможно ли его вставить, если else, если в reactjs jsx?

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

Я ищу

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

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

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

Обновление

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

Спасибо

Ответы

Ответ 1

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

{ 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 && "stuff": если по ошибке someBoolean имеет значение 0 или NaN, этот номер будет отображаться в DOM. Так что, если "логическое" может быть ложным числом, его безопаснее использовать (someBoolean? "stuff": null).

Ответ 2

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

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

Ответ 3

Ваш альтернативный код недействителен. Выражение 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>
)

Ответ 4

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

На мой взгляд, для лучшей читаемости кода в этот случай лучше было бы перемещать содержимое 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, поэтому, пожалуйста, проверьте это, если вас интересует более подробная информация по этой теме.

Ответ 5

Вы можете проверить несколько условий для визуализации компонентов, как показано ниже:

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>