Frage Wie man Text in ReactJS ausgibt, ohne ihn in span einzupacken


In meiner ReactJS-basierten Anwendung mache ich:

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

Das Problem ist: 'Ein Text' wird in ein zusätzliches span-Element im DOM eingeschlossen. Gibt es eine Möglichkeit, dieses Verhalten zu vermeiden und nur Rohtext auszugeben?

Um es klar zu sagen: Ich möchte ausgeben

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

nicht

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

39
2018-06-28 17:50


Ursprung


Antworten:


Aktualisieren: Dies ist jetzt "behoben" in Reagieren v15 (2016-04-06) - jetzt werden Kommentarknoten um jeden Text herum hinzugefügt, aber nicht mehr in a <span> Etikett.

Wir haben in dieser Veröffentlichung einige tolle Beiträge von der Community erhalten und möchten sie hervorheben diese Pull-Anfrage durch Michael Wienenk bestimmtes. Dank der Arbeit von Michael gibt React 15 nicht mehr extra aus <span> Knoten um den Text, wodurch die DOM-Ausgabe viel sauberer wird. Dies war ein langjähriger Ärger für React-Benutzer, daher ist es aufregend, dies als externen Beitrag zu akzeptieren.

Vollständige Versionshinweise.


Dies ist derzeit eine technische Einschränkung von React; Er umschließt alle Fließtextknoten in einem Bereich, sodass er ihm eine ID zuweisen und später darauf verweisen kann. In einer zukünftigen Version von React können wir diese Einschränkung hoffentlich entfernen.


38
2018-06-28 19:28



Sie können den HTML-Code als letzten Ausweg fest codieren.

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

2
2018-03-19 21:02



Nun .. Wenn Sie die Hölle wollen und die Einschränkung akzeptieren, dass Sie nicht auf Requisiten oder Zustände zugreifen können, könnten Sie das tun:

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 fügt keine spans oder react-dataid ein und ist für das statische Server-Rendering gedacht. Es ist wahrscheinlich keine gute Idee, das zu tun, aber da gehst du.

renderToStaticMarkup   Ähnlich wie renderToString, außer dass dies kein zusätzliches DOM erzeugt   Attribute wie Data-Reac-ID, die React intern verwendet. Das ist   nützlich, wenn Sie Reagieren als einfacher statischer Seitengenerator verwenden möchten   Durch das Entfernen der zusätzlichen Attribute können viele Bytes gespeichert werden.

Überprüfen Sie das Ergebnis unter: http://learnreact.robbestad.com/#/static


1
2018-02-09 11:24



Ich habe die Version von react und react-dom geändert und perfekt funktioniert

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

1
2018-04-28 17:39