javascript - dangerouslysetinnerhtml - react native

operador ternario en jsx para incluir html con reaccionar

Question

Estoy usando reaccionar y estoy intentando mostrar este mensaje de error si this.state.message === ''failed'' error this.state.message === ''failed'' . Pero realmente no estoy seguro de por qué esta operación ternaria no está funcionando. ¿Qué estoy haciendo mal aquí?

render() {
...
<div className="row">
return (this.state.message === ''failed'') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

En este momento, solo está mostrando return (this.state.message === ''failed'') ? ( => return (this.state.message === ''failed'') ? ( => en el html

Answer 1

Actualmente me gusta formatear mis ternarios como este en reaccionar:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === ''failed'')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Tiene razón en que las IIFE se pueden usar dentro de una declaración de render así como en expresiones ternarias. El uso de una instrucción normal if .. else es válida, pero la instrucción return de la función de render solo puede contener expresiones, por lo que tendría que render otro lugar

Answer 2

Dadas las respuestas anteriores, también puede devolver directamente una expresión ternaria de return() en su render() esta manera

return condition? this.function1(): this.function2();

y dentro de function1 () y function2 () puede devolver sus vistas.

Answer 3

Deberías intentar esto:

render () {
    return (
        <div className="row">
            { (this.state.message === ''failed'') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

Answer 4

La respuesta aceptada por @Nathan y otras respuestas similares son correctas. Pero vale la pena señalar que el resultado para ? y el resultado para : debe ser cada uno un elemento individual o envuelto en un solo elemento (o el resultado puede ser null | undefined , cualquiera de los cuales califica como un solo elemento). En el siguiente ejemplo, el resultado para ? funcionará pero el resultado para : fallará ....

return (
  {this.state.message === ''failed'' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)

Answer 5

La sintaxis para ternaria es condition ? if : else condition ? if : else . Para estar seguro, siempre puede ajustar la declaración ternaria completa entre paréntesis. Los elementos JSX también están envueltos entre paréntesis. La flecha gruesa en una función de flecha siempre está precedida por dos paréntesis (para los argumentos), pero no necesita ninguna función aquí de todos modos. Entonces, dado todo eso, hay un par de errores de sintaxis en su código. Aquí hay una solución de trabajo:

render() {
  return (this.state.message === ''failed'' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Editar: si esto está dentro de otro marcado, entonces no es necesario que vuelva a llamar a render. Puedes usar llaves para la interpolación.

render() {
  return (
    <div className="row">
      {this.state.message === ''failed'' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

Answer 6

Para usar variables dentro de ternario usa corchetes de nuevo.

render() {
  return(
    <div className=''searchbox''>
     {this.state.var ? <div className=''warning''>{this.state.var}</div> : ''''}
    </div>
  )
}