javascript - dangerouslysetinnerhtml - react class attribute

Cómo generar texto en ReactJS sin envolverlo en span

Question

En mi aplicación ReactJS hago:

var _ = React.DOM;
_.span(null, ''some text'', _.select(null, ...));

El problema es que ''algún texto'' está envuelto en un elemento de tramo adicional en el DOM. ¿Hay alguna manera de evitar este comportamiento y simplemente enviar el texto sin formato?

Para ser claro: quiero dar salida

<span>some text<select>...</select></span>

no

<span><span>some text</span><select>...</select></span>

Answer 1

Bueno ... Si estás empeñado en hacer esto, y aceptas la limitación de que no puedes acceder a los accesorios o al estado, puedes hacer esto:

var Component = React.createClass({
    displayName:"Statics",
    statics: {
         customRender: function(foo) {
              return React.renderToStaticMarkup(<div 
              dangerouslySetInnerHTML={{__html: foo.bar }}/>);
         }
    },
    render: function () {
        return <div dangerouslySetInnerHTML={{__html: 
               <Component.customRender bar="<h1>This is rendered
               with renderToStaticMarkup</h1>" />}} />
    }
});

renderToStaticMarkup no insertará ningún tramo o react-dataid, y está destinado a la representación estática del servidor. Probablemente no sea una buena idea hacer esto, pero ahí lo tienes.

renderToStaticMarkup Similar a renderToString, excepto que esto no crea atributos DOM adicionales como data-react-id, que React usa internamente. Esto es útil si desea usar React como un simple generador de páginas estáticas, ya que eliminar los atributos adicionales puede ahorrar muchos bytes.

Verifique el resultado en: http://learnreact.robbestad.com/#/static

Answer 2

Cambié la versión de reaccionar y reaccionar-dom y trabajé perfecto

"react": "^15.0.1",
"react-dom": "^15.0.1"

Answer 3

Puede codificar el html como último recurso.

<option value={value} dangerouslySetInnerHTML={{__html: value}}></option>

Answer 4

Actualización: Esto ahora está "arreglado" en React v15 (2016-04-06) - ahora se agregan nodos de comentario alrededor de cada fragmento de texto, pero ya no está envuelto en una etiqueta <span> .

Recibimos algunas contribuciones increíbles de la comunidad en este lanzamiento, y nos gustaría destacar este pedido de extracción por parte de Michael Wiencek en particular. Gracias al trabajo de Michael, React 15 ya no emite nodos <span> adicionales alrededor del texto, lo que hace que la salida DOM sea mucho más limpia. Esta fue una molestia de larga data para los usuarios de React por lo que es emocionante aceptar esto como una contribución externa.

Notas de la versión completa.

Esta es actualmente una limitación técnica de React; envuelve cualquier nodo de texto flotante en un lapso para que pueda asignarle una ID y volver a consultarlo más adelante. En una versión futura de React, con suerte podemos eliminar esta restricción.