jsx ne fonctionne pas

Question

Je suis en utilisant le &nbsp balise dans jsx et il n'est pas le rendu de l'espace. Voici un petit extrait de mon code.S'il vous plaît aider.

var Reporting=React.createClass({

  render: function(){
    return(
      <div style={divPositionReporting}>
          <p>Pricing Reports</p>
          <hr></hr>
          Select Scenario:&nbsp;&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
          Select Takeout Scenario:&nbsp;
          <select>
            <option></option>
          </select>
          <button type="button">Get Pricing Report</button>
          <br/>
      </div>
    );
  },

});

Answer 1

Voir: https://facebook.github.io/react/docs/jsx-gotchas.html

Essayez: Select Scenario:{'\u00A0'}

Ou: <div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

Ou: <div>&nbsp;</div>

https://jsfiddle.net/omerts/b4st33nw/

Mise à jour

Après avoir vu certains commentaires, et de l'essayer. Il est venu à mon attention que l'utilisation de html les entités à l'intérieur de JSX fonctionne très bien (contrairement à ce qui est mentionné dans le ci-dessus jsx-pièges de référence [c'est peut-être obsolète]).

Donc, en utilisant quelque chose comme: R&D, serait sortie de: "R&D". Il y a un comportement bizarre avec  , ce qui le fait s'afficher différemment, donc, me faisant penser qu'il ne fonctionne pas:

<div>This works simply:-&nbsp;-</div>
<div>This works simply:- {'\u00A0'}-</div>

Produit:

This works simply:- -
This works simply:-  -

Answer 2

Écrivez votre jsx code enveloppé dans { } comme indiqué ci-dessous.

<h1>Code {' '}</h1>

Vous pouvez mettre un espace ou un caractère spécial ici.

e.g dans votre cas

Select Takeout Scenario: 

devrait ressembler à ceci

Select Takeout Scenario:{' '}

Il va travailler.

Que des Conseils, vous ne devriez pas utiliser &nbsp pour ajouter de l'espace supplémentaire, vous pouvez utiliser css pour atteindre même.

Answer 3

Vous pouvez également utiliser ES6 modèle de littéraux c'est à dire,

`   <li></li>` or `  ${value}`