32
测试一个代码
admin edited this page 2025-10-20 06:51:13 +00:00
{/* 内容 */}
// 当外部内容变化时,更新 Vditor 的值32132132
useEffect(() => {
// 只有在编辑器已初始化且不是用户编辑时才处理外部更新
if (isInitializedRef.current && vditorInstanceRef.current && !isUserEditingRef.current) {
const currentValue = vditorInstanceRef.current.getValue();
// 严格的更新条件:
// 1. 外部值与编辑器当前值确实不同
// 2. 外部值与上次记录的值不同(避免循环更新)
// 3. 外部值不为空或者是首次设置
if (
value !== currentValue &&
value !== lastKnownValueRef.current
) {
console.log("外部值更新:", { value, currentValue, lastKnown: lastKnownValueRef.current });
// 标记这是来自父组件的更新
updateFromParentRef.current = true;
// 使用 setTimeout 确保在下一个事件循环中执行
setTimeout(() => {
if (vditorInstanceRef.current) {
vditorInstanceRef.current.setValue(value);
lastKnownValueRef.current = value;
}
}, 0);
}
}
}, [value]);
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";
import MarkdownIt from "markdown-it";
import { useEffect, useRef, useCallback } from "react";
import {
default as Editor,
default as MdEditor,
Plugins,
} from "react-markdown-editor-lite";
import "react-markdown-editor-lite/lib/index.css";
1231321