& nbsp jsx ne fonctionne pas

J'utilise la balise & nbsp dans jsx et cela ne rend pas l'espace. Ce qui suit est un petit extrait de mon code. Veuillez 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>
    );
  },

});

Voir: JSX en profondeur

Essayer: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Mettre à jour

Après avoir lu certains des commentaires et essayé. Il est venu à mon attention que l'utilisation d'entités html à l'intérieur de JSX fonctionne bien (contrairement à ce qui est indiqué dans la référence jsx-gotchas ci-dessus [peut-être que c'est obsolète]).

Donc, utiliser quelque chose comme R&D:, produirait: 'R&D'. Il y a un comportement étrange avec  , qui le rend différemment, me faisant ainsi penser que cela ne fonctionne pas:

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

Produit:

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

Écrivez votre jsxcode enveloppé { }comme indiqué ci-dessous.

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

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

par exemple dans votre cas

Select Takeout Scenario: 

devrait être comme ça

Select Takeout Scenario:{' '}

Ça va marcher.

Comme conseil, vous ne devriez pas utiliser &nbsppour ajouter de l'espace supplémentaire, vous pouvez utiliser css pour y parvenir.

{'\u00A0'}fonctionne mais est difficile à lire, donc je l'ai enveloppé dans un composant de fonction :

composants / nbsp.js:

export default () => '\u00A0';

usage:

Hello<Nbsp />world

Si cela ne fonctionne pas pour vous, {' '}utilisez {'\u00A0'}.

{' '}rendra un espace mais il y a des cas où vous voulez que la hauteur de ligne soit également rendue dans le cas où vous voulez un espace à l'intérieur d'un élément HTML qui n'a pas d'autre texte, c'est-à-dire:, <span style={{ lineHeight: '1em' }}>{' '}</span>dans ce cas, vous devrez utiliser {'\u00A0'}à l'intérieur du span ou élément HTML.

Essayez d'utiliser utf-8 nbsp, semble un espace simple, mais fonctionne bien sans code supplémentaire.

Vous devriez peut-être créer une variable pour cela.

Pour les symboles de copie: https://unicode-table.com/en/00A0/

Pour générer automatiquement des textes, utilisez un typograf.

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

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