Javascript 在React组件中呈现HTML DOM节点

我正在使用Wordpress作为我的CMS，并在React中创建一些页面并呈现它。我有一个用例，需要在React组件内部呈现HTMLDOM节点。我在querySelector（）的帮助下获得DOM节点，它将返回DOM节点。在React中，我尝试使用React.createElement渲染它。但它在我的页面上呈现为[object HtmlDevice]

 render() {
      const { reactPages } = this.props;
      const innerPages = React.createElement('div', {id: "myDiv"}, `${reactPages.children[0]}`);
      
      return (
        <div className="react-cmp-container">
          <h3>React Container</h3>
          { innerPages }
        </div>
      )
    }
  }

render（）{
const{reactPages}=this.props；
const innerPages=React.createElement（'div'，{id:'myDiv}，`${reactPages.children[0]}`）；
返回(
反应容器
{innerPages}
)
}
}

我尝试的另一件事是使用危险的Html：

 rawMarkUp = () => {
      const { reactPages } = this.props;

      return {__html: reactPages}
    }

    render() {

      const innerPages = React.createElement('div', {id: "myDiv"}, )
      
      return (
        <div className="react-cmp-particle-container">
          <h3>React Particle Container</h3>
          <div dangerouslySetInnerHTML={this.rawMarkUp()}></div>
        </div>
      )
    }

rawMarkUp=（）=>{
const{reactPages}=this.props；
返回{uuuu html:reactPages}
}
render（）{
const innerPages=React.createElement（'div'，{id:'myDiv'}，）
返回(
反应粒子容器
)
}

这是我获取的DOM节点类型，并将其作为道具传递给我的组件。

---

不建议这样做。以后可能会引起很多麻烦。不管怎样

querySelector（）

返回

DOM元素（或此类元素的集合）

1. <代码>反应.创建元素

React.createElement

不起作用，因为它需要另一个

React.Element

，或者一个

字符串，而不是
DOM元素

2. <代码>危险的赛汀神经HTML

危险的LySetinerHTML

不起作用，因为它需要的是HTML字符串，而不是

DOM元素

您可以使用

domeElement.innerHTML

并将HTML字符串放入

DangerlySetinerHTML

，但这可能无法按您的需要表示DOM元素

3. <代码>用户EF 可以向React渲染的某个元素添加

ref

。这使您可以访问相应的

DOM元素

（由React呈现），并且可以使用普通的DOM方法注入

DOM元素

（由

querySelector（）

返回）

这将禁用对“跟踪发生了什么”的响应，并且您可能会遇到不一致的状态和难以理解的bug

e、 g:

export const StaticHtml=（props）=>{
const ref=useRef（）；
useffect（（）=>{
var elm=document.getElementById（'some-static-html'）；
参考当前附件（elm）；
}, []);
返回(
某个部门
);
};

您是否尝试过使用

React.render（）

函数来确保您正在渲染DOM元素。@shn在我的ReactDOM.render中，我正在渲染我试图打印DOM节点的组件。render（，元素）@shn即使我尝试在React.render中渲染节点，也会出现错误，因为：对象作为React子对象无效（找到：[object htmldevelment]），请在codesandbox中复制

export const StaticHtml = (props)=>{
    const ref = useRef();

    useEffect(() =>{
        var elm = document.getElementById('some-static-html');
        ref.current.appendChild(elm);
    }, []);

    return (<div ref={ ref }>
        some div
    </div>);
};