javascript - 将现有元素注入(inject) React

Question

我正在尝试将页面上已经存在的元素注入(inject)到我的 React 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")
    );

我不确定如何将元素注入(inject)到react中+我需要元素的样式保持原样。

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

希望这有帮助!