React.js: Is it possible to convert a react component to HTML DOM's?
You can render a ReactElement in a detached DOM Node via React.render
. Thus, the following code should work for you.
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);
});
},
You could also use React's renderToString() method
_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>
);
}
This should work for a simple component as shown. React.renderToString() will return only the html for the component.
For newer versions of React
import ReactDOMServer from "react-dom/server";
let html = ReactDOMServer.renderToString(<div>...</div>)