¿Cómo hacer una statement if if anidada en reactjs JSX?

Quería saber si es posible hacerlo nested si else si está en reactjs jsx ?

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

Busco

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

Lo he intentado pero no puedo procesarlo. Lo he intentado de varias maneras. Siempre se rompe una vez que agregue el si nested.

  { 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 function. Ambas respuestas funcionaron sin embargo. Creo que puedo usar la solución en línea si se trata de un simple render y renderContent para casos más complicados.

Gracias

Debe envolver su título y cuerpo en un contenedor. Eso podría ser un div. Si usa una list en su lugar, tendrá un elemento less en el dom.

 { this.state.loadingPage ? <span className="sr-only">Loading... Registenetworking Devices</span> : [ (this.state.someBoolean ? <div key='0'>some title</div> : null ), <div key='1'>body</div> ] } 

Aconsejarí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 el isBool && component si solo desea la parte verdadera del ternario.

 renderContent() { if (this.state.loadingPage) { return <span className="sr-only">Loading... Registenetworking 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>; } 

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

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

Permite simplificar esto

 ( true ? 42 : 21 3 ) 

Esto arroja el error

Untaught SyntaxError: número inesperado (…)

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

En su lugar, debe devolver un único valor de la twig falsa del operador condicional. Puede hacer esto 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 desea mostrar "cuerpo" cuando se muestra "algún otro título", debe mover <div>body</div> en la twig falsa del operador condicional:

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

O tal vez quieres

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

En lugar de anidar operadores ternarios, como a menudo se sugiere o crear una function separada que no se reutilizará en ningún otro lugar, simplemente puede llamar a 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>