Next.js中@uiw/react-md-editor输入时失焦问题排查与解决

问题原因 #

你遇到的焦点丢失问题，核心原因是将动态导入的MDEditor组件定义在了MdEditor函数组件的内部。每次MdEditor组件因状态更新（比如输入字符触发setMd）发生重渲染时，都会重新执行动态导入的逻辑，生成一个全新的MDEditor组件实例。React会把这个新实例判定为完全不同的组件，进而卸载旧组件并挂载新组件，直接导致编辑器焦点丢失。

解决方案 #

把动态导入的代码移到MdEditor组件外部，确保MDEditor只被初始化一次，不会随组件重渲染而重复创建：

修改后的Component/MdEditor代码：

import React, { useState } from "react";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";

// 将动态导入移至组件外部，保证只执行一次
const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
  ssr: false,
});

const MdEditor = () => {
  const [md, setMd] = useState<string | undefined>("# Hello World");

  return <MDEditor value={md} onChange={setMd} />;
};

export default MdEditor;

额外优化（可选） #

如果父组件（即index中的表单组件）存在频繁重渲染的情况，可以给MdEditor包裹React.memo，避免不必要的重渲染：

// 在文件末尾修改导出
export default React.memo(MdEditor);

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