html - meaning - react props

& nbsp jsx no funciona

Question

Estoy usando la etiqueta & nbsp en jsx y no representa el espacio. El siguiente es un pequeño fragmento de mi código. Ayuda.

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

Escriba su código jsx envuelto en { } como se muestra a continuación.

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

Puedes poner espacio o cualquier personaje especial aquí.

por ejemplo en tu caso

Select Takeout Scenario: 

debería ser así

Select Takeout Scenario:{'' ''}

Funcionará.

Como consejo, no debe usar &nbsp para agregar espacio adicional, puede usar css para lograrlo.

Answer 2

Si esto no funciona para usted {'' ''} entonces use {''/u00A0''} .

{'' ''} representará un espacio, pero hay algunos casos en los que desea que la altura de la línea también se represente en un caso en el que desea un espacio dentro de un elemento HTML que no tenga otro texto, es decir: <span style={{ lineHeight: ''1em'' }}>{'' ''}</span> , en ese caso deberá usar {''/u00A0''} dentro del elemento span o HTML.

Answer 3

También puede usar literales de plantilla ES6, es decir,

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

Answer 4

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

Pruebe: Select Scenario:{''/u00A0''}

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

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

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

Actualizar

Después de ver algunos de los comentarios y probarlo. Me ha llamado la atención que el uso de entidades html dentro de JSX funciona bien (a diferencia de lo que se indica en la referencia jsx-gotchas anterior [tal vez esté desactualizado]).

Entonces, usar algo como: R&D , generaría: ''R&D''. Hay un comportamiento extraño con   , lo que hace que se procese de manera diferente, lo que me hace pensar que no funciona:

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

Produce:

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

Answer 5

{''/u00A0''} funciona pero es difícil de leer, así que lo envolví en un componente de función :

componentes / nbsp.js:

export default () => ''/u00A0'';

uso:

Hello<Nbsp />world