React状态变化时CKEditor组件未重新加载/重渲染问题

@ckeditor/ckeditor5-react 提供的<CKEditor>组件中，initData属性仅在组件首次挂载、初始化编辑器实例时读取一次，后续外部传入的value更新不会触发该属性的同步，属于官方组件的默认设计逻辑，并非React组件重渲染失效。
另外你代码里className的默认值写法有误，className接收字符串类型，默认值设为空对象会触发React的DOM属性警告。

方案1：通过编辑器实例同步值（推荐，生产环境可用） #

通过onReady回调拿到编辑器实例，用useEffect监听外部value变化，在内容不一致时调用编辑器内置的setData方法更新内容，同时避免光标跳转、编辑历史丢失的问题。

import { useRef, useEffect } from 'react';

const CkEditor = ({value, onChange, className = ''}) => {
  const editorInstance = useRef(null);

  // 外部value变化时同步到编辑器
  useEffect(() => {
    const editor = editorInstance.current;
    if (!editor) return;
    // 内容一致时不更新，避免光标错位
    if (editor.getData() !== value) {
      editor.setData(value ?? '');
    }
  }, [value]);

  return (
    <div className={className}>
      <CKEditor
        initData={value}
        onReady={(editor) => {
          editorInstance.current = editor;
        }}
        onChange={(_, editor) => {
          // 从编辑器实例取最新值抛给父组件，保证值一致
          onChange?.(editor.getData());
        }}
      />
    </div>
  )
}

方案2：key值强制重挂载（仅适合简单静态场景） #

如果不需要保留编辑器撤销历史、光标位置、选中状态等内部上下文，可以给组件绑定和value关联的key，value变化时直接销毁重建编辑器实例，实现内容更新：

const CkEditor = ({value, onChange, className = ''}) => {
  return (
    <div className={className}>
      <CKEditor
        key={value}
        initData={value}
        onChange={onChange}
      />
    </div>
  )
}

该方案缺点明显：每次value变化都会重新初始化编辑器，性能损耗大，且会打断用户编辑流，非必要不使用。

内容的提问来源于stack exchange，提问作者Aswin cv