Внедрить существующий элемент в React

Question

Я пытаюсь внедрить уже существующий элемент на странице в мой реагирующий DOM, чтобы обернуть его.

Что-то вроде:

var someElement = document.getElementById("stuff")
var parent = someElement.parentNode;
var wrapper = document.createElement("div");
wrapper.id = "root1";
parent.replaceChild(wrapper, someElement);
wrapper.appendChild(someElement);

ReactDOM.render(
      <Wrapper child="{{someElement}}" />,
      document.getElementById("root1")
    );

Я не уверен, как мне сделать инъекцию элемента в реагирование + Мне нужны стили элемента, чтобы оставаться как есть.

Answer 1

Вы можете использовать метод React dangerouslySetInnerHTML следующим образом:

function getHtml(){
    return "<h1>Hello World</h1>" // element.innerHTML (optional)
}


ReactDOM.render(
      <Wrapper> 
           <div dangerouslySetInnerHTML={{ __html: getHtml() }} />
     </Wrapper>,
      document.getElementById("root1")
    );

Добавить: <Wrapper/> should render { this.props.children }

Документация здесь: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Надеюсь, это поможет!