web-dev-qa-db-fra.com

& 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. Aide s'il vous plaît.

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>
    );
  },

});
htmlreactjsjsx
42
Indraneel Bende

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/

Mettre à jour

Après avoir vu certains des commentaires et les avoir essayés. Il m'est apparu que l'utilisation d'entités html dans JSX fonctionnait correctement (contrairement à ce qui est indiqué dans la référence précédente de jsx-gotchas [peut-être qu'il est obsolète]).

Donc, en utilisant quelque chose comme: R&amp;D, vous obtiendriez: 'R & D'. Il existe un comportement étrange avec &nbsp;, qui le rend différemment, ce qui me fait 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:-  -
87
omerts

Ecrivez votre code jsx dans {} comme indiqué ci-dessous.

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

Vous pouvez mettre de l'espace ou tout caractère spécial ici.

par exemple dans votre cas

Select Takeout Scenario:&nbsp;

devrait être comme ça

Select Takeout Scenario:{' '}

Ça va marcher.

En tant que conseil, vous ne devez pas utiliser &nbsp pour ajouter de l’espace supplémentaire, vous pouvez utiliser css pour y parvenir.

12
WitVault

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

composants/nbsp.js:

export default () => '\u00A0';

usage:

Hello<Nbsp />world
1
Dmitry Pashkevich

Vous pouvez également utiliser des littéraux de modèle ES6, à savoir, 

`   <li></li>` or `  ${value}`
0
Hemadri Dasari

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

{' '} restituera un espace, mais dans certains cas, vous voudrez que la hauteur de ligne soit également affichée. Dans ce cas, vous souhaitez insérer un espace dans un élément HTML sans autre texte, par exemple: <span style={{ lineHeight: '1em' }}>{' '}</span>. Dans ce cas, vous devrez utiliser {'\u00A0'} à l'intérieur de la span ou de l'élément HTML.

0
Cory Robinson