带道具的Draftjs组件

Question

我对draftjs很陌生，我想知道是否有一种方法可以在编辑器中内联地呈现我的自定义组件。

我有一个带有twitter句柄的字符串。我使用装饰符检测regex @{句柄}，它替换句柄并将组件内联呈现。但是，我的句柄组件需要属性，例如回调函数和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中提供CompositeDecorator中的CompositeDecorator({strategy:xxx,component:xxx,props:{...}})，比如检查来源