React 18中如何动态创建组件并挂载到指定DOM元素

核心思路 #

在React 18中，必须使用createRoot替代旧的ReactDOM.render来挂载组件。要获取组件实例的ref并调用内部方法，关键是确保ref在组件挂载完成后再访问，同时正确传递ref到组件内部。

具体实现 #

1. 定义带可调用方法的组件

如果是函数组件，需要用forwardRef配合useImperativeHandle暴露内部方法；类组件则直接通过ref获取实例：

函数组件示例

import { forwardRef, useImperativeHandle, useState } from 'react';

const DynamicComponent = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  // 暴露给外部的方法
  useImperativeHandle(ref, () => ({
    increment: () => setCount(prev => prev + 1),
    getCount: () => count
  }));

  return <div>当前计数: {count}</div>;
});

类组件示例

import { Component } from 'react';

class DynamicClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  };

  getCount = () => {
    return this.state.count;
  };

  render() {
    return <div>当前计数: {this.state.count}</div>;
  }
}

2. 外部动态挂载组件并获取Ref

使用createRoot初始化挂载目标，通过createRef创建ref，挂载后等待组件渲染完成再调用方法：

import { createRoot, createRef } from 'react-dom/client';

// 获取挂载目标DOM
const mountTarget = document.querySelector('.grid');
if (!mountTarget) return;

// 创建ref
const componentRef = createRef();

// 创建根节点并渲染组件
const root = createRoot(mountTarget);
root.render(<DynamicComponent ref={componentRef} />);

// 等待组件挂载完成后调用方法
// React 18渲染是异步的，queueMicrotask能确保在渲染完成后执行
queueMicrotask(() => {
  if (componentRef.current) {
    componentRef.current.increment();
    console.log('当前计数:', componentRef.current.getCount());
  }
});

关于queueMicrotask的可靠性 #

你用queueMicrotask的方案是可靠的。React 18的并发渲染是异步的，queueMicrotask会在当前宏任务结束后、下一个宏任务开始前执行，刚好能覆盖React的异步渲染周期，确保此时组件已经挂载完成，ref的current已经指向组件实例。

注意事项 #

• 记得在不需要组件时调用root.unmount()卸载，避免内存泄漏：

  // 卸载组件
  root.unmount();
  

• 这种方式属于React反模式，仅在封装非React环境集成的库等必要场景使用；如果是纯React项目，优先考虑通过组件状态、props等内置方式管理组件。

内容的提问来源于stack exchange，提问作者ghiscoding