Dewey Waspada Dewey Waspada - 3 months ago 124
Javascript Question

React.js: Is it possible to convert a react component to HTML DOM's?

I'm working on a map-based app that uses Google Map API to create markers and its info window in React.js. The

infowindow.setContent()
only accepts either a
String
or
HTML
. It's impossible for me to pass in
String
as I have a
button
that links to a specific method in another react component (something like:
_this.props.addList(place)
). Thus I must fill the argument as HTML DOM as the following lines of code:



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





The codes work for me but I don't wanna create elements one by one. I've also tried to pass the argument with a React component but it seems not working:



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 is there another way to at least convert a react component to HTML so that I don't have to write
document.createElement()
one by one?

Thanks

Answer

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

  });

},
Comments