& nbsp jsx no funciona


101

Estoy usando la etiqueta & nbsp en jsx y no representa el espacio. El siguiente es un pequeño fragmento de mi código. Por favor, 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>
    );
  },

});

¿Buscaste? Primera visita
Felix Kling

No creo que haya nada malo en tu código. ¿Qué versión de Babel y React están usando? Asegúrese de utilizar las últimas versiones. Puede ver en la respuesta de Babel que el código generado contiene caracteres de espacio en blanco que no se rompen.
Felix Kling

Bueno, ahora el primer golpe es este. :) duckduckgo.com/?q=jsx+nbsp
Marc Stober

Respuestas:


214

Ver: JSX en profundidad

Tratar: Select Scenario:{'\u00A0'}

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

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

jsfiddle

Actualizar

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

Entonces, usando algo como:, R&amp;Ddaría como resultado: 'I + D'. Hay un comportamiento extraño con &nbsp;, que hace que se renderice 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:-  -

8
Entonces, la respuesta es usar el valor unicode correspondiente a la entidad html y usarlo dentro de una cadena javascript. Gracias por tu ayuda.
Indraneel Bende

@IndraneelBende &nbsp;debería funcionar bien. Hay algún problema con el atributo value in style.
Gaurav Kumar

@Gaurav Kumar, también intenté que no funcionó, simplemente se ignora. ¿Podría agregar algo al violín en mi respuesta?
omerts

1
<div>Doesn't work: -&nbsp;-</div> funciona bien para mí. editar: Bueno, no parece ser un espacio sin rupturas.
Felix Kling

Mmh, produce el resultado esperado en el sitio web de React, aunque ...
Felix Kling


17

Escribe tu jsxcódigo envuelto en{ } como se muestra a continuación.

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

Puedes poner espacio o cualquier carácter especial aquí.

por ejemplo, en tu caso

Select Takeout Scenario:&nbsp;

debería ser así

Select Takeout Scenario:{' '}

Funcionará.

Como consejo que no debe usar &nbsppara agregar espacio adicional, puede usar css para lograr lo mismo.


2
Esto es solo para agregar espacios en blanco, pero no funcionará para otras entidades html
omerts

5
Sin embargo, ese no es un espacio que no se rompa .
TimoSolo

1
@TimoSolo No te animo a usar & nbsp ni la técnica mencionada anteriormente. Puedes probar la primera respuesta si la mía no funciona. Gracias.
WitVault

"use css para lograr lo mismo": es posible que esté usando un espacio que no se divida para que su texto no caiga a la siguiente línea y fuera del límite del elemento que contiene el texto. Si desea utilizar propiedades CSS para hacer esto en su lugar, una forma de hacerlo es text-overflow: "clip"; overflow: "hidden";. Hay algunas variaciones disponibles.
Dan Cron

4

Si esto no funciona para usted {' '}, 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 tiene otro texto, es decir <span style={{ lineHeight: '1em' }}>{' '}</span>, en ese caso, deberá usarlo {'\u00A0'}dentro del span o elemento HTML.


1

Intente usar utf-8 nbsp, parece un espacio simple, pero funciona bien sin código adicional.

Quizás, deberías crear una variable para esto.

Para copiar símbolos: https://unicode-table.com/en/00A0/

Para generar textos de forma automática, utilice algunos typograf.


0

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

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

¿Qué tiene que ver esta respuesta con las entidades html?
boatcoder
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.