reactjs - 带 props 的 Draftjs 组件

Question

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

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

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

我确信我错过了一些东西。我已经检查了 contentState.getEntity(entityKey).getType() 但它只将我传递到复合装饰器中的内容视为无样式，而不将装饰部分视为单独的 block 。

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

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

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