React.js：是否可以将反应组件转换为HTML DOM？

Question

我正在使用基于地图的应用程序，该应用程序使用Google Map API在React.js中创建标记及其信息窗口。 infowindow.setContent()只接受String或HTML。我不可能通过String，因为我有一个button链接到另一个反应组件中的特定方法（如：_this.props.addList(place)）。因此，我必须填写的参数作为HTML DOM为下面的代码行：

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

的代码为我工作，但一个我不想创建元素之一。我也试图通过与阵营成分的说法，但似乎不工作：

​​

所以是有另一种方式来至少转换反应成分为HTML，让我不要不必一一写下document.createElement()？

感谢

Answer 1

您可以通过React.render呈现一种超然的DOM节点上ReactElement。因此，下面的代码应该适合你。

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

你也可以使用阵营的renderToString（）方法

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

这应该简单部件的工作方式，如图所示。 React.renderToString（）将仅返回组件的html。

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;