Draft.js 如何在自定义块组件中获取当前 block 的文本内容？

夏侯思涵提问于 2026-03-27 16:11:22 阅读 4

交互

我在用 Draft.js 做一个富文本编辑器，想给特定类型的 block（比如 ‘custom-block’）渲染一个自定义组件。现在的问题是，我怎么在组件里拿到这个 block 对应的纯文本内容？

我试过从 props 里拿 blockProps，但里面没有 text。也查了文档，看到 EditorState 和 ContentBlock，但不知道怎么在组件内部直接取到。比如我想在组件里显示 {text}，但 text 不知道从哪来。

我的自定义组件是这样注册的：

const blockRenderer = (block) => {
  if (block.getType() === 'custom-block') {
    return {
      component: CustomBlockComponent,
      editable: false,
    };
  }
};

Draft.js 富文本编辑

我来解答赞 1 收藏

反馈

1 条解答

百里蕴轩 Lv1

我之前踩过这个坑，Draft.js 获取 block 的文本内容确实有点绕。在自定义组件里直接拿 text 的确不行，但其实方法很简单。

关键是通过 block.getText() 来获取文本内容。你在注册组件时，可以给 CustomBlockComponent 传入额外的 props。

修改一下你的 blockRenderer 函数：

const blockRenderer = (block) => {

  if (block.getType() === 'custom-block') {

    return {

      component: CustomBlockComponent,

      props: {

        text: block.getText(),

      },

      editable: false,

    };

  }

};

然后在你的 CustomBlockComponent 里就可以直接使用这个 text prop 了：

const CustomBlockComponent = (props) => {

  return (

    <div>

      {props.text}

    </div>

  );

};

记得别忘了 import 必要的模块。这样就能拿到 block 的文本内容了，亲测有效。有时候这些细节官方文档说得不够清楚，得自己摸索。希望这能帮你少走点弯路。

2026-03-27 16:12