web-dev-qa-db-fra.com

Impossible de restituer une valeur booléenne dans JSX?

J'essaie de rendre la valeur booléenne à l'intérieur de JSX, cependant React l'évalue en tant qu'expression et ne retourne rien après le retour du composant.

Une solution pour cela?

Voici un exemple

var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value:    {ipsumText}
  </div>,
  document.getElementById('impl')
);

Affiche simplement le code HTML compilé comme

<div data-reactid=".0"><span data-reactid=".0.0">Boolean Value:    </span></div>

EDIT: Voici le lien JSBin pour l'exemple http://jsbin.com/nibihodoce/1/edit?html,js, sortie

EDIT 2: J'ai déjà exploré l'alternative .toString (), cependant depuis que j'itère sur un tableau d'objets et qu'un champ particulier de cet objet peut avoir une valeur de type chaîne/entier/booléen. Appliquer .toString () à tous ne semble pas optimal.

javascriptreactjsreact-jsx
32
anuj_io
 Boolean Value:    { ipsumText.toString() }

UPD: ou

 Boolean Value:    { String( ipsumText ) }

ou

 Boolean Value:    { '' + ipsumText }

ou

 {`Boolean Value: ${ipsumText}`}

ou

 Boolean Value:    { JSON.stringify( ipsumText ) }

Je préfère la deuxième option. Universel, rapide, fonctionne pour tous les types primitifs: Boolean( smth ), Number( smth ).

67
gaperton

Vous pouvez convertir une valeur booléenne en chaîne, en la concaténant avec une chaîne vide:

var ipsumText = true;

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText + ''}
  </div>,
  document.getElementById('impl')
);

Ou vous pouvez le faire, lors de l'attribution de la valeur bool à la variable:

var ipsumText = true + '';

ReactDOM.render(
  <div>
     Boolean Value: {ipsumText}
  </div>,
  document.getElementById('impl')
);

Si votre variable ne peut pas avoir de valeur booléenne, vous devez la convertir en booléenne:

// `ipsumText` variable is `true` now.
var ipsumText = !!'text';
1
1ven