Question

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

我不确定如何将元素注入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

希望这会有所帮助！

将现有元素注入React

1 个答案: