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

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

- tkamath99

---

你尝试使用React.render()函数来确保渲染DOM元素了吗？ - shn

@shn 在我的 ReactDOM.render 中，我正在渲染我的组件，并尝试打印 DOM 节点。ReactDOM.render(<MyComponent />, element); - tkamath99

@shn 即使我尝试在 React.render 中渲染 Node，它仍会出现错误：对象不是有效的 React 子元素（找到：[object HTMLDivElement]）。 - tkamath99

请在 CodeSandbox 中复制。 - Dennis Vash

Answer 1

这样做不建议，因为它可能会导致很多问题。无论如何，...

querySelector()返回一个DOM元素（或一组这样的元素）。

1. React.createElement

React.createElement不起作用，因为它期望另一个React.Element或string，而不是DOM元素。

2. dangerouslySetInnerHTML

dangerouslySetInnerHTML不起作用，因为它期望一个HTML字符串，而不是DOM元素。

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

3. useRef

您可以向React渲染的某些元素添加ref。这使您可以访问相应的DOM元素 （由React渲染），并且您可以使用普通的DOM方法注入您的DOM元素 （由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>);
};

- kca

---

第三种方法（使用useRef）非常棒，谢谢！ - Alexis Delrieu