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

我尝试的另一件事是使用angerlySetInnerHTML：

 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 节点类型，并将其作为 props 传递给我的组件。

Answer 1

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

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

1.React.createElement

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

2.dangerouslySetInnerHTML

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

您可以使用domElement.innerHTMLHTML 字符串并将其放入 中dangerouslySetInnerHTML，但这可能无法按照您的需要表示 DOM 元素。

3.useRef

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

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

例如：

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