本文旨在讲解如何在 React Native 应用中，像 Ant Design 的 message 组件一样，通过函数调用来动态渲染外部组件，例如 Toast、Modal 等。核心思路是利用 ReactDOM.createPortal 将组件渲染到文档的特定位置，并结合 document fragment 创建新的根节点进行渲染，从而实现无需在主组件中维护状态即可触发组件显示的效果。
在 React Native 开发中，我们有时希望能够像 Ant Design 的 message.success() 方法一样，通过一个简单的函数调用来显示 Toast、Modal 等组件，而无需在主组件中维护状态或条件渲染。以下是一种实现此功能的方案，该方案借鉴了 Ant Design 的实现思路，并结合了 ReactDOM.createPortal 和 document fragment。
核心思路：
- 创建可复用的组件: 首先，你需要创建一个可复用的 React 组件，例如 Toast 组件，用于展示提示信息。
- 使用 ReactDOM.createPortal: 使用 ReactDOM.createPortal 将 Toast 组件渲染到文档的特定位置，例如 document.body。createPortal 允许你将子组件渲染到 DOM 树的不同位置，即使它在 React 组件树中的位置不同。
- 创建 document fragment 和根节点: 创建一个 document fragment，并使用 ReactDOM.createRoot 在该 fragment 上创建一个新的根节点。然后，将包含 Toast 组件的 portal 渲染到该根节点。
- 定义触发函数: 定义一个函数，例如 showToast(message)，该函数负责创建包含 Toast 组件的 portal，并将其渲染到 document fragment 创建的根节点。
示例代码：
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
import React from 'react';
import ReactDOM from 'react-dom/client';
const Toast = ({ msg }) => {
return <h1>Toast: {msg}</h1>;
};
const ToastPortal = (props) => {
return ReactDOM.createPortal(<Toast {...props} />, document.body);
};
const showToast = (msg) => {
const fragment = document.createDocumentFragment();
ReactDOM.createRoot(fragment).render(<ToastPortal msg={msg} />);
};
const App = () => (
<button onClick={() => showToast('Hello world!')}>Show Toast</button>
);
ReactDOM.createRoot(document.body).render(<App />);代码解释：
- Toast 组件：一个简单的 React 组件，用于显示 Toast 消息。
- ToastPortal 组件：使用 ReactDOM.createPortal 将 Toast 组件渲染到 document.body。
- showToast 函数：
- 创建一个 document fragment。
- 使用 ReactDOM.createRoot 在 fragment 上创建一个新的根节点。
- 使用 ReactDOM.render 将 ToastPortal 组件渲染到该根节点。
- App 组件：包含一个按钮，点击按钮时调用 showToast 函数。
注意事项：
- 确保你的 React 版本支持 ReactDOM.createPortal (React 16 及以上)。
- 在 React Native 环境中，document.body 可能需要特殊处理。你可以使用 react-native-root-siblings 或类似的库来创建一个根视图，并将 portal 渲染到该视图中。
- document fragment 在添加到 DOM 之前，不会引起页面的重新渲染。这有助于提高性能。
- 在更复杂的场景中，你可能需要管理多个 Toast 的显示和隐藏，例如使用队列或状态管理库。
总结：
通过结合 ReactDOM.createPortal 和 document fragment，我们可以实现一种优雅的方式，在 React Native 应用中通过函数调用来动态渲染外部组件。这种方法避免了在主组件中维护状态的复杂性，使代码更加简洁和易于维护。希望本文能够帮助你理解和应用这种技术。
