React.js: Ist es möglich, zu konvertieren reagieren Komponente zur HTML-DOM?

Arbeite ich an einem map-basierte app, die Google-Karte API zum erstellen von Markierungen und deren info-Fenster in React.js. Die infowindow.setContent() nur akzeptiert entweder einen String oder HTML. Es ist für mich unmöglich zu übergeben String wie ich eine button, dass links auf eine bestimmte Methode in einem anderen reagieren Komponente (sowas wie: _this.props.addList(place) ). Also ich muss füllen Sie das argument HTML-DOM als die folgenden Zeilen des Codes:

JS:

var div = document.createElement('div');
var title = document.createElement('h4');
title.innerHTML = place.name;

var btn = document.createElement('button');
btn.className = 'btn btn-danger btn-block';
btn.appendChild(document.createTextNode('I want to go here !!'));

div.appendChild(title).appendChild(btn);

google.maps.event.addListener(marker, 'click', function() {

  infowindow.setContent( div );
  infowindow.open(map, this);
});

btn.addEventListener('click', function() {
  _this.props.addList(place);
});

Die codes funktionieren für mich, aber ich will nicht das erstellen von Elementen eins nach dem anderen. Ich habe auch versucht, übergeben Sie das argument mit einem Reagieren Komponente, aber es scheint nicht zu arbeiten:

JS:

createMarker: function() {
  
  /** Some other lines of code */

  var _this = this;

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent( _this._renderInfoWindow(place) );
    infowindow.open(map, _this);

  });

},

//my infowindow rendering method
_renderInfoWindow: function(place) {
  return(
    <div>
      <h4>{place.name}</h4>
      <p>{place.cost}</p>
      <button className="btn btn-danger btn-block" onClick={this.props.addList.bind(this, place)}>I want to go here !! </button>
    </div>
  )
},

also gibt es eine andere Möglichkeit zumindest konvertieren reagieren Komponente in HTML, sodass ich nicht schreiben muss document.createElement() eins nach dem anderen?

Dank

InformationsquelleAutor Jihad Waspada | 2015-04-12
  1. 18

    Können Sie das Rendern einer ReactElement in einem Einfamilienhaus-DOM-Knoten über Reagieren.render. So, der folgende code sollte für Sie arbeiten.

    createMarker: function() {

  /** Some other lines of code */

  _this = this;

  google.maps.event.addListener(marker, 'click', function() {

    var div = document.createElement('div');
    ReactDOM.render( _this._renderInfoWindow(place), div );
    infowindow.setContent( div );
    infowindow.open(map, this);

  });

},
    • Ich bekam die folgende Fehlermeldung: "Uncaught Error: Invariant Violation: Reagieren.render(): Ungültige Komponente element." bei der Anwendung Ihrer Lösung
    • hab die Lösung, sorry. es ist, weil der code ausgeführt wird, Reagieren.remder (), bevor das element ist fertig erstellt. hier ist die Lösung: var div = document.createElement('div'); setInterval(function() { if( div ) clearInterval(); }, 5); Reagieren.render( _diese._renderInfoWindow(Ort), div);
    • Das war Teil der Dewey-code-snippet. Es sei denn _this definiert wurde, der höher in der Funktion Körper, es wird zwar Bluten, um den globalen scope.
    • Sollten Sie verwenden ReactDOM.render statt, nicht React.render.
    InformationsquelleAutor Alexandre Kirszenberg
  2. 8

    Könnten Sie auch Reagieren die renderToString () - Methode

    _renderInfoWindow: function(place) {
  return React.renderToString(
    <div>
      <h4>{place.name}</h4>
      <p>{place.cost}</p>
      <button className="btn btn-danger btn-block" onClick={this.props.addList.bind(this, place)}>I want to go here !! </button>
    </div>
  );
}

    Diese Arbeit sollte für eine einfache Komponente, wie dargestellt.
    Reagieren.renderToString() wird wieder nur der html-Code für die Komponente.

    • Ich verwendet import ReactDOMServer from 'react-dom/server' and ReactDOMServer.renderToStaticMarkup`
    • Den button-event-handler funktioniert nicht mit diesem Ansatz.
    InformationsquelleAutor Federico
  3. 2

    Für neuere Versionen Reagieren

    import ReactDOMServer from "react-dom/server";

let html = ReactDOMServer.renderToString(<div>...</div>)
    InformationsquelleAutor Yoannes Geissler
  4. 0
    //Create a DOM element to hold the react component.
var span = document.createElement('span');
//Render the React component.
React.render(h.button(null, 'Buttonz!'), span);
//This will give the result as a string, which is useful if you've escaped
//React's context (e.g. inside DataTables).
//Obviously, the component will no longer be reactive but this is a
//good way to leverage simple stuff you've already written in React.
//In my case, I'm primarily leveraging React wrappers around Bootstrap components.
//The important thing is that componentDidMount gets called.
return span.outerHTML;
    InformationsquelleAutor F. P. Freely
Schreibe einen Kommentar