使用useRef的React createPortal不起作用

问题描述：使用useRef的React createPortal不起作用。

解答： React的createPortal方法可以将组件渲染到DOM树中的任意位置，而不仅仅是组件所在的位置。在某些情况下，我们可能需要将组件渲染到DOM树的根节点之外，比如在弹出框或者模态框中显示组件。

在使用createPortal方法时，我们可以结合useRef钩子来获取一个DOM节点的引用，然后将该节点作为createPortal方法的第二个参数传入，从而实现将组件渲染到指定的DOM节点上。

以下是一个示例代码：

import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  const modalRootRef = useRef(null);

  useEffect(() => {
    const modalRoot = modalRootRef.current;
    const modalContainer = document.createElement('div');
    modalRoot.appendChild(modalContainer);

    return () => {
      modalRoot.removeChild(modalContainer);
    };
  }, []);

  return ReactDOM.createPortal(
    children,
    modalRootRef.current
  );
};

const App = () => {
  return (
    <div>
      <h1>React createPortal Example</h1>
      <Modal>
        <p>This is a modal content.</p>
      </Modal>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

在上述代码中，我们创建了一个Modal组件，该组件使用createPortal方法将其子组件渲染到modalRootRef.current所引用的DOM节点上。在Modal组件的useEffect钩子中，我们通过document.createElement方法创建了一个div元素，并将其作为子节点添加到modalRootRef.current所引用的DOM节点上。在组件卸载时，我们通过modalRoot.removeChild方法将该div元素从DOM树中移除。

需要注意的是，modalRootRef.current所引用的DOM节点必须在组件渲染之前存在，否则createPortal方法将无法正常工作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。