javascript - switch - react render return conditional

¿Cómo hacer una declaración anidada if else en reactjs JSX?

Question

Quería saber si es posible hacer anidado si no si en reactjs jsx ?

He intentado varias maneras diferentes y no puedo hacer que funcione.

Busco

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

He intentado esto pero no puedo hacer que renderice. He intentado varias maneras. Siempre se rompe una vez que agrego el anidado si.

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

Actualizar

Terminé eligiendo la solución para mover esto a renderContent y llamar a la función. Sin embargo, ambas respuestas funcionaron. Creo que puedo usar la solución en línea si es para un render simple y renderContent para casos más complicados.

Gracias

Answer 1

Como lo sugiere la otra respuesta, hay varias formas de hacer un anidado si no reaccionan. Cuál utilizar depende de la situación y las preferencias.

En mi opinión, para una mejor legibilidad del código, en esta ocasión sería mejor mover el contenido de else a la función separada:

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>
    )
}

O si es lo suficientemente simple (en caso de que no se rendericen otros elementos), me gustaría ir con:

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

Aquí hay un artículo sobre la representación condicional en React , así que por favor revise si está interesado en más detalles sobre este tema.

Answer 2

En lugar de anidar operadores ternarios como a menudo se sugiere o crear una función separada que no se reutilizará en ningún otro lugar, simplemente puede invocar una expresión en línea:

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

Answer 3

Necesitas envolver tu título y cuerpo en un contenedor. Eso podría ser un div. Si utiliza una lista en su lugar, tendrá un elemento menos en el 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>
    ]
}

Yo recomendaría no anidar declaraciones ternarias porque es difícil de leer. A veces es más elegante "regresar temprano" que usar un ternario. Además, puede usar isBool && component si solo desea la parte verdadera del ternario.

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>;
}

Advertencia sobre la sintaxis someBoolean && "stuff" : si por error, someBoolean se establece en 0 o NaN , ese Número se representará en el DOM. Entonces, si el "booleano" podría ser un número falso , es más seguro usarlo (someBoolean ? "stuff" : null) .

Answer 4

Su código en la alternativa no es una expresión válida de JavaScript / JSX:

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

Vamos a simplificar esto a

(
  true ? 42 : 21
  3
)

Esto arroja el error.

Error de sintaxis no detectado: número inesperado (...)

No puedes tener solo dos expresiones una al lado de la otra.

En su lugar, debe devolver un solo valor de la rama falsa del operador condicional. Puede hacerlo simplemente colocándolo en otro elemento JSX:

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

Si solo quieres mostrar "cuerpo" cuando se muestra "otro título", debes mover <div>body</div> a la rama falsa del operador condicional:

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

O tal vez quieras

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