本文介绍一种安全、可维护的方案：将状态管理逻辑移至组件内部，通过回调函数将外部事件触发的更新操作“桥接”进 react 的状态系统，从而实现外部函数对组件内渲染数组的动态更新。
在 React 开发中，直接在组件外部（如全局作用域或独立工具函数）修改组件内部状态是反模式的——不仅破坏了 React 的单向数据流原则，还极易引发状态不同步、无法触发重渲染等问题。你遇到的 DragHandler 函数需在组件外导出，但又需影响 CodePageMain 内部渲染的 div 数组，正确解法不是让外部函数“触碰” state，而是让组件主动暴露更新能力，并由外部逻辑调用该能力。
✅ 推荐方案：使用 ref + 回调注入（无额外依赖）
首先，在 CodePageMain 中定义状态与更新函数，并通过 useRef 保存一个可被外部访问的回调引用：
import React, { useState, useEffect, useRef } from 'react';
// 声明一个全局可访问的 ref（仅用于桥接，非全局状态）
export const dragUpdateRef = { current: (newDiv: HTMLElement) => {} };
const CodePageMain = () => {
const [divElements, setDivElements] = useState<HTMLElement[]>([]);
// 每次 divElements 变化时，同步更新 ref，确保外部调用的是最新逻辑
useEffect(() => {
dragUpdateRef.current = (newDiv) => {
setDivElements(prev => [...prev, newDiv]);
};
}, []);
return (
<div className="codeContainer">
{/* 渲染所有 div 元素 */}
{divElements.map((div, idx) => (
<div key={idx} dangerouslySetInnerHTML={{ __html: div.outerHTML }} />
))}
{/* 或更安全地：若 div 是轻量 JSX 结构，建议在组件内构造，而非传入 DOM 节点 */}
{/* 示例替代：{divElements.map((props, idx) => <DynamicDiv key={idx} {...props} />)} */}
</div>
);
};
export default CodePageMain;接着，改造 DragHandler ——它不再尝试修改 state，而是调用 dragUpdateRef.current：
// DragHandler.ts
import { dragUpdateRef } from './CodePageMain';
export function DragHandler() {
const codeContainer = document.querySelector('.codeContainer');
if (!codeContainer) return;
codeContainer.addEventListener('dragover', (e) => e.preventDefault());
codeContainer.addEventListener('drop', (e) => {
e.preventDefault();
// ✅ 此处构造新 div（纯 DOM 操作）
const newDiv = document.createElement('div');
newDiv.className = 'dropped-item';
newDiv.textContent = `Dropped at ${new Date().toLocaleTimeString()}`;
// ? 交由组件内部逻辑接管更新
dragUpdateRef.current(newDiv);
});
}⚠️ 注意事项与最佳实践
- 避免 dangerouslySetInnerHTML 直接插入 HTML 字符串：如示例中所示，若 newDiv 来自不可信来源，存在 XSS 风险。更健壮的做法是：外部函数只传递数据（如 { id: string; content: string }），组件内统一渲染为受控 JSX 元素。
- ref 更新时机：useEffect 确保 dragUpdateRef.current 总是指向最新的 setDivElements 闭包，避免 stale closure 导致状态未更新。
- 清理监听器（推荐增强）：在实际项目中，应在组件卸载时移除事件监听器，或改用 useEffect + cleanup 管理 DragHandler 的生命周期。
-
替代方案对比：
- ✅ Context / Zustand / Redux：适用于多组件共享拖放状态的复杂场景；
- ❌ 全局数组 + 强制刷新：违背 React 哲学，难以调试且易出错；
- ⚠️ useState 外提至模块级：破坏组件封装性，导致状态污染和并发问题。
✅ 总结
核心思想是「控制反转（IoC）」：组件保留状态所有权，但向外部暴露标准化的更新接口（即 ref 中的函数）。这样既满足了 DragHandler 必须导出的需求，又完全遵循 React 的响应式范式。最终效果是：每次 drop 触发，新 div 被创建 → 通过 ref 回调通知组件 → 组件 setState → 自动重渲染新增元素——清晰、可靠、可测试。
