React如何从类组件外部访问内部Editor的EditorState值

先修正你代码里的一个隐性问题：不要在App这种函数组件内部定义RichEditorExample类组件，每次App重渲染都会重新生成这个类的引用，React会判定组件类型变更，直接卸载重挂载旧实例，导致输入内容、组件状态丢失，要把RichEditorExample的定义挪到App外层。

要从组件外部拿到内部的EditorState，不要用ref直接扒组件内部状态，不符合React单向数据流的设计，推荐两种可落地的实现：

把editorState的维护逻辑从RichEditorExample内部挪到父组件App中，通过props把状态值和更新方法传给子组件，父组件可以直接访问到最新的状态值，不需要额外做值传递。
改造后代码示例：

import React, { useState } from 'react';
// RichEditorExample 定义在App外部
class RichEditorExample extends React.Component {
  // 原有的toggleBlockType、toggleInlineStyle、focus等逻辑无需改动
  render() {
    // 从props取父组件传入的状态和更新方法
    const { editorState, onChange } = this.props;
    // 原有className计算等逻辑保留
    return (
      <div className="RichEditor-root">
        <BlockStyleControls
          editorState={editorState}
          onToggle={this.toggleBlockType}
        />
        <InlineStyleControls
          editorState={editorState}
          onToggle={this.toggleInlineStyle}
        />
        <div className={className} onClick={this.focus}>
          <Editor
            editorState={editorState}
            onChange={onChange}
          />
        </div>
      </div>
    );
  }
}

const App = () => {
  // 状态提升到父组件维护
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  // 父组件内可以随时调用editorState做业务逻辑，比如提交、预览等
  const handleGetContent = () => {
    const plainText = editorState.getCurrentContent().getPlainText();
    console.log('编辑器纯文本内容：', plainText);
  }

  return (
    <div>
      <RichEditorExample 
        editorState={editorState}
        onChange={setEditorState}
      />
      {/* 此处直接访问editorState即可 */}
      <button onClick={handleGetContent}>获取编辑器内容</button>
    </div>
  );
}

如果不想调整RichEditorExample内部的状态维护逻辑，可以给组件加一个回调类型的prop，每次内部editorState更新时，主动调用这个回调把最新值抛给父组件。
改造后代码示例：

import React, { useState } from 'react';
// RichEditorExample 定义在App外部
class RichEditorExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };

    this.onChange = (editorState) => {
      this.setState({ editorState });
      // 状态更新时，调用父组件传入的回调把新值传出去
      this.props.onEditorStateChange?.(editorState);
    }
    // 原有其他绑定逻辑保留
  }

  // 原有的toggleBlockType、toggleInlineStyle、focus、render等逻辑无需改动
}

const App = () => {
  // 父组件存储从子组件拿到的编辑器状态
  const [editorState, setEditorState] = useState(null);

  return (
    <div>
      <RichEditorExample 
        onEditorStateChange={setEditorState}
      />
      {/* 此处通过editorState即可访问最新值，做判空处理即可 */}
      {editorState && (
        <div>当前文本长度：{editorState.getCurrentContent().getPlainText().length}</div>
      )}
    </div>
  );
}

注意：除非是要主动调用组件内部的焦点控制这类指令式方法，否则不要通过ref直接获取组件实例读取内部state，这种写法会让状态流向混乱，后续迭代很容易出难以排查的bug。

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