Javascript 如何在DraftJS中的锚定标记中显示子组件？

使用CodeSandbox中的工作示例更新帖子

我们正在使用DraftJS插入一个

更改内容状态的当前代码：

this.applyLink = () => {
  const { editorState } = this.state;
  const selectionState = editorState.getSelection();

  const entity = Entity.create("LINK", "MUTABLE", {
    url: "http://foo.com"
  });

  const update = RichUtils.toggleLink(editorState, selectionState, entity);

  this.onChange(update);
};

正在渲染的实际链接：

const Link = props => {
  const { url } = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a href={url} style={styles.link}>
      {props.children}
    </a>
  );
};

期望状态 我们的产品负责人要求链接保留可能选择的任何其他元素

例如，对于带有自定义实体的文本：

Foo-bar-Foo

如果用户高亮显示“bar”和自定义实体，我们希望围绕它们呈现锚定标记。即

然而，我们的代码正在剥离任何非文本的内容，

将消失

使用CodeSandbox更新 我创建了一个在CodeSandbox中复制的示例

CodeSandbox页面详细说明了复制的步骤。简而言之，如果添加文本和自定义实体（使用按钮），则高亮显示内容，如下所示：

然后，在突出显示仍处于活动状态的情况下，单击“应用链接”，编辑器将渲染：

^注意：应用链接后，自定义实体消失

---

任何人都可以帮助找出如何将该自定义实体保留在锚定标记中吗？

Draft.js

不支持，但是如果可以使用它们，可以使用一些选项

---

特别是，看看这个。

没有爱？仍然在试图弄明白这一点，你能发布代码的stackblitz/codesandbox演示吗？@munimuna我添加了一个codesandbox示例。谢谢你的推荐。对于文档中的任何帮助，我们都非常感激，\一个实体是一个表示一系列文本\的元数据的对象，因此标记会被清除，以便为实体提供一个文本。也许这能激励你

function findLinkEntities(contentBlock: ContentBlock, callback, contentState) {
  contentBlock.findEntityRanges(character => {
    const entityKey = character.getEntity();

    return (
      entityKey !== null &&
      contentState.getEntity(entityKey).getType() === "LINK"
    );
  }, callback);
}