html - meaning - react props
& nbsp jsx no funciona (5)
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:
<select>
<option></option>
</select>
<button type="button">Get Pricing Report</button>
<br/>
Select Takeout Scenario:
<select>
<option></option>
</select>
<button type="button">Get Pricing Report</button>
<br/>
</div>
);
},
});
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
 
para agregar espacio adicional, puede usar
css
para lograrlo.
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.
También puede usar literales de plantilla ES6, es decir,
` <li></li>` or ` ${value}`
Ver: https://facebook.github.io/react/docs/jsx-gotchas.html
Pruebe:
Select Scenario:{''/u00A0''}
O bien:
<div dangerouslySetInnerHTML={{__html: ''Select Scenario: ''}} />
O:
<div> </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:- -</div>
<div>This works simply:- {''/u00A0''}-</div>
Produce:
This works simply:- -
This works simply:- -
{''/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