带有 props 的 Draftjs 组件

Question

我是 draftjs 的新手，我想知道是否有办法在编辑器中内联呈现我的自定义组件。

我有一个带有 Twitter 句柄的字符串。我使用装饰器来检测正则表达式 @[{handle}] ，它替换句柄并内联渲染组件。但是，我的句柄组件需要回调函数和 URL.

等属性

我不太确定如何将我传递到 ContentEditable 组件的 URL 和回调函数传递给我的组件。

我确定我只是遗漏了一些东西。我检查了 contentState.getEntity(entityKey).getType() 但它只看到我传递给复合装饰器的内容是无样式的，而不是装饰部分作为单独的块。

我看到您可以修改实体映射，但我不确定这是否是正确的方法或如何在实体映射中定义我自己的实体

有人知道我缺少什么来为我的组件提供属性吗？

const decorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
    component: Handle,
  },
]);


export default class ContentEditable extends component {
    const content = 'some messages and my handle @[handle]';
    if (this.props.content.trim() !== '') {
      const processedHTML = DraftPasteProcessor.processHTML(content);
      const entityMap = processedHTML.entityMap;
      const contentState = ContentState.createFromBlockArray(processedHTML.contentBlocks, entityMap);
      // Create with content with decorator
      editorState = EditorState.createWithContent(contentState, decorator);
    } else {
      // Create empty content with decorator
      editorState = EditorState.createEmpty(decorator);
    }
    this.state = {
      editorState,
    }
}

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

Answer 1

很抱歉文档丢失了。您可以在 CompositeDecorator 中提供 props，例如 CompositeDecorator({strategy:xxx,component:xxx,props:{...}}) 检查 source

带有 props 的 Draftjs 组件

Draftjs components with props

reactjs

draftjs