如何引用react-dom

安装 react-dom

确保项目已安装 React 和 react-dom。通过 npm 或 yarn 安装：

npm install react react-dom

或

yarn add react react-dom

导入 react-dom

在需要使用的文件中导入 react-dom 或特定 API（如 render）：

import * as ReactDOM from 'react-dom';

或按需导入：

import { render, hydrate, createPortal } from 'react-dom';

基本用法

使用 render 方法将 React 组件挂载到 DOM 节点：

import React from 'react';
import { render } from 'react-dom';

const App = () => <div>Hello World</div>;
render(<App />, document.getElementById('root'));

服务端渲染 (SSR)

使用 hydrate 在客户端激活服务端渲染的 HTML：

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

创建 Portal

通过 createPortal 将子节点渲染到 DOM 外的位置：

import { createPortal } from 'react-dom';

const Modal = ({ children }) => {
  return createPortal(
    children,
    document.getElementById('modal-root')
  );
};

卸载组件

使用 unmountComponentAtNode 卸载已挂载的组件：

import { unmountComponentAtNode } from 'react-dom';

unmountComponentAtNode(document.getElementById('root'));

注意事项

• React 18+ 推荐使用 react-dom/client 的 createRoot API 替代传统 render。
• 确保目标 DOM 节点存在于文档中后再调用渲染方法。