Javascript React.js：是否可以将 React 组件转换为 HTML DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29586411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js: Is it possible to convert a react component to HTML DOM's?
提问by Jihad Waspada
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 Stringor HTML. It's impossible for me to pass in Stringas I have a buttonthat 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:
我正在开发一个基于地图的应用程序，该应用程序使用 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);
});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:
这些代码对我有用，但我不想一个一个地创建元素。我还尝试使用 React 组件传递参数，但似乎不起作用：
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?
那么有没有另一种方法至少将一个react组件转换为HTML，这样我就不必document.createElement()一个一个地写了？
Thanks
谢谢
回答by Alexandre Kirszenberg
You can render a ReactElement in a detached DOM Node via React.render. Thus, the following code should work for you.
您可以在分离的 DOM 节点中通过React.render. 因此，以下代码应该适合您。
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);
});
},
回答by Federico
You could also use React's renderToString() method
你也可以使用 React 的 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>
);
}
This should work for a simple component as shown. React.renderToString() will return only the html for the component.
这应该适用于如图所示的简单组件。React.renderToString() 将只返回组件的 html。
回答by Yoannes Geissler
For newer versions of React
对于较新版本的 React
import ReactDOMServer from "react-dom/server";
let html = ReactDOMServer.renderToString(<div>...</div>)
回答by Brendon
This should render the HTML.
这应该呈现 HTML。
import ReactDOMServer from "react-dom/server";
const html = ReactDOMServer.renderToString(<div>...</div>)
回答by F. P. Freely
// 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;
