Draft.js ^0.10.*版本用EditorState.createEmpty()报错：blockRendererFn is not a function

先给你吃个定心丸：在Draft.js 0.10.x版本里，blockRendererFn并不是必填项，你遇到这个错误大概率是组件props传递出了问题，或者版本兼容导致的。下面给你几个具体的排查和解决方向：

1. 检查Editor组件的props传递是否有误 #

你可能不小心把非函数值传给了blockRendererFn属性。比如类似下面的错误写法：

// 错误示例：把对象/字符串误传给blockRendererFn
<Editor
  editorState={this.state.editorState}
  blockRendererFn={{ /* 这里不是函数 */ }}
/>

或者解构props时变量名搞错，导致传递了错误的值。正确的做法是：如果不需要自定义区块渲染，完全可以不传递这个props；如果需要自定义，确保它是一个函数，比如：

// 正确示例：要么不传，要么传合法函数
<Editor
  editorState={this.state.editorState}
  onChange={this.handleChange}
  // 可选：自定义区块渲染逻辑
  blockRendererFn={(contentBlock) => {
    // 这里写你的自定义判断逻辑
    return null; // 返回null会使用默认渲染规则
  }}
/>

2. 验证React版本兼容性 #

Draft.js 0.10.x要求React版本至少在15.3.0以上，如果你的React版本过低，可能会触发这类奇怪的props类型错误。可以去项目根目录的package.json里查看React版本，确保满足最低要求。

3. 确认导入的是官方Editor组件 #

别不小心导入了第三方封装的Editor组件，那些组件可能有不同的props要求。确保你的导入语句是：

import { Editor, EditorState } from 'draft-js';

4. 用最简代码排查问题 #

先把你的Editor组件简化到最基础的版本，看是否还会报错：

import React from 'react';
import { Editor, EditorState } from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.handleChange = (editorState) => this.setState({ editorState });
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.handleChange}
      />
    );
  }
}

export default MyEditor;

如果这个简化版能正常运行，说明你原来的代码里某个额外的props导致了问题，再逐步添加其他props排查即可。

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