React.js: Можно ли преобразовать компонент реакции в HTML DOM?

Я работаю над картографическим приложением, которое использует API карт Google для создания маркеров и его информационного окна в React.js. infowindow.setContent() принимает только a 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);
});

Ответ 1

Вы можете отобразить ReactElement в отдельной DOM Node через 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);

  });

},

Ответ 2

Вы также можете использовать метод 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>
  );
}

Это должно работать для простого компонента, как показано. React.renderToString() вернет только html для компонента.

Ответ 3

Для более новых версий React

import ReactDOMServer from "react-dom/server";

let html = ReactDOMServer.renderToString(<div>...</div>)

Ответ 4

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

Ответ 5

Это должно сделать HTML.

import ReactDOMServer from "react-dom/server";

const html = ReactDOMServer.renderToString(<div>...</div>)