0

我正在使用提及插件实现 React 的“draft js”。https://www.draft-js-plugins.com/到目前为止，我能够创建编辑器并创建提及标签。我可以使用 rest API 将提及保存在我的数据库中。这是我将内容保存到数据库时所做的事情：

 const contentState = this.state.MyInput.getCurrentContent();
 const raw = convertToRaw(contentState);
 const data =  JSON.stringify(raw, null, 2);

在此之后，我将数据传递给 API。直到这里它运行良好，现在当我尝试从数据库中检索数据时。我使用以下步骤

  handlePostDisplay = (post) => {
  const savedData = JSON.parse(post.body)
  if (savedData !== null) {
    const contentState = convertFromRaw(savedData);
    const newEditorState = EditorState.createWithContent(contentState);
    return newEditorState;
  }
}

然后在我的帖子列表模块中，我将 newEditorState 作为道具传递。

<PostCard key={post.id} {...post} 
   postContent = {this.handlePostDisplay(post)}
/>

最后这是我要显示的编辑器：

  <Editor 
      editorState={props.postContent} 
      readOnly={true} 
  />

上面的代码呈现文本，但提及和 hastags 没有正确显示，它们显示为纯文本。我确信我在渲染时遗漏了任何步骤，从文档中我可以看到我们需要使用装饰器，但不确定我们如何使用。我将非常感谢任何帮助！

4

1 回答 1

0

确保添加提及插件 css 文件。

导入'draft-js-mention-plugin/lib/plugin.css'；

于 2020-10-26T15:44:52.480 回答