时间戳

首页 > 解决方案 > 将现有元素注入 React

javascript - 将现有元素注入 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 + 我需要元素的样式保持原样。

标签： javascripthtmlreactjsdomgoogle-chrome-extension

解决方案

你可以像这样使用 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

希望这可以帮助！

推荐阅读