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

我尝试的另一件事是使用 dangerouslySetInnerHTML:

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

Answer 1

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

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

1。 React.createElement

React.createElement 确实不起作用，因为它需要另一个 React.Element 或 string，不是 DOM 元素。

2。 dangerouslySetInnerHTML

dangerouslySetInnerHTML 不起作用，因为它需要一个 HTML string，而不是 DOM-element。

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

3。 useRef

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

这会使 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>);
};