React.js: Ist es möglich, eine reaktive Komponente in HTML DOMs umzuwandeln?

Question

Ich arbeite an einer kartenbasierten App, die die Google Map-API verwendet, um Markierungen und ihr Informationsfenster in React.js zu erstellen. Die infowindow.setContent() akzeptiert nur entweder String oder HTML. Es ist unmöglich für mich, String zu übergeben, da ich eine button habe, die eine Verbindung zu einer bestimmten Methode in einer anderen Reaktionskomponente herstellt (etwas wie: _this.props.addList(place)). So muss ich das Argument als HTML-DOM wie die folgenden Codezeilen füllen:

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 für mich arbeiten, aber ich will nicht schaffen eine Elemente nach dem anderen. Ich habe auch versucht, mit einem Reagieren Komponente, das Argument zu übergeben, aber es scheint nicht funktioniert:

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> 
 
) 
 
},

so gibt es eine andere Art und Weise eine Komponente in HTML zu mindestens konvertieren reagieren, so dass ich don muss nicht document.createElement() eins nach dem anderen schreiben?

Dank

Answer 1

Sie können über React.render eine ReactElement in einem frei stehenden DOM Knoten machen. Daher sollte der folgende Code für Sie funktionieren.

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); 

    }); 

}, 

Answer 2

Sie könnten auch renderToString der Reaktion() -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> 
); 
} 

Dies sollte für eine einfache Komponente arbeiten, wie dargestellt. React.renderToString() gibt nur den HTML-Code für die Komponente zurück.

Answer 3

// 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;