0
233
ViewsEl valor del estado de impresión en React, que es booleano, no se imprime mediante la interpolación de cadenas
import React, { Component } from 'react'; class ButtonStatus1 extends Component { constructor(props){ super(props); this.state = { a: "false", b: false } } render(){ return ( <div> <h1>a: {this.state.a}, b: {this.state.b}</h1> </div> ); } } export default ButtonStatus1;Producción:
Esperado:
falso, falso
La interpolación de cadenas, que yo sepa, siempre generará una salida en forma de cadena, sea cual sea la entrada. Entonces, en ese escenario, incluso si this.state.b fuera boolean - false , la salida debería haberse impreso. Si el valor está allí, solo porque era booleano, ¿por qué no se imprime? ¿No es esto extraño?
3 answers
Answer question0
{} no es solo una interpolación de cadenas
Es una sintaxis JSX para informar que la expresión que contiene debe evaluarse
Pero hay algunos valores específicos para los que no se representará nada, como
<div /> <div></div> <div>{false}</div> <div>{null}</div> <div>{undefined}</div> <div>{true}</div>y los booleanos se utilizan a menudo para la representación condicional como
{array.length > 0 && array.map(...)} si array.length > 0 es false , no es deseable representar false
por cierto, puede convertir los valores booleanos en cadenas si desea representarlos ( false.toString() )
0
JSX está ejecutando una expresión dentro de {} , no es una interpolación de cadenas.
Si React DID imprimiera valores booleanos/nulos/indefinidos, significaría que no podría hacer cortocircuitos como:
isTrue() && <p>hello world</p> En lugar de mostrar nada si isTrue() es igual a false , siempre se mostraría como false en el DOM. Esto haría que la representación condicional fuera mucho más engorrosa.
0
Into React world return false tiene el mismo resultado que return null. Entonces, la interpolación de cadenas es una función simple que NO solo devuelve cadenas. Puede ser cualquier componente JSX renderizado. Es por eso que false se representa como un valor vacío. Deberías usar
String(this.state.b);