在 React 组件中渲染 HTML DOM 节点

Question

我使用 Wordpress 作为我的 CMS，并在 React 中创建一些页面并渲染它。 我有一个用例，我需要在我的 React 组件内渲染 HTML DOM 节点。 我在 querySelector() 的帮助下获取了 DOM 节点，它返回了 DOM 节点。 在 React 中，我尝试使用 React.createElement 来渲染它。 但它在我的页面上呈现为 [object HTMLDivElement]。

 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>
      )
    }
  }

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

 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>
      )
    }

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

Answer 1

不建议这样做。 以后可能会带来很多麻烦。 反正， ...

querySelector()返回一个DOM-element （或此类元素的集合）。

1. React.createElement

React.createElement不起作用，因为它需要另一个React.Element或string ，而不是DOM-element 。

2. dangerouslySetInnerHTML

dangerouslySetInnerHTML不起作用，因为它需要 HTML字符串，而不是DOM-element 。

您可以使用domElement.innerHTML并将 HTML 字符串放入dangerouslySetInnerHTML ，但这可能无法代表您想要的 DOM 元素。

3. useRef

您可以将ref添加到由 React 呈现的某些元素。 这使您可以访问相应的DOM-element （由 React 呈现） ，并且您可以使用普通 DOM 方法注入您的DOM-element （由querySelector()返回） 。

这会使 React 无法“跟踪正在发生的事情”，并且您可能会遇到不一致的 state 和难以理解的错误。

例如：

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>);
};