如何用与编辑器值中的匹配字符串不同的文本呈现装饰器/实体

时间:2019-06-17 14:13:27

标签: reactjs draftjs

我正在尝试使用draftJS创建一个编辑器,该编辑器将编辑器字段中的关联值呈现为将包含在编辑器实际字符串值中的引导。我遇到的问题是,当我尝试在装饰器中呈现关联的值而不是实际值时,编辑器开始表现异常。

示例: 如果我的存储中有guid:1234value:"example value"的对象,则编辑器的值为hi there {1234},我希望它通过GUID查找对象的名称并渲染{{1} } ..但是,当我让我的装饰器渲染包含名称而不是与正则表达式匹配的guid的跨度时,编辑器的焦点开始向后跳。我注意到,在装饰器中未渲染{props.children}是导致此问题的唯一原因。

这就是我尝试过的...

hi there <span>example value</span>

我希望能够将所需的任何内容渲染到装饰器组件中,而不会引起编辑器焦点的怪异问题。.我正在将这些装饰器耦合到IMMUTABLE实体,该实体的行为似乎与我期望的一样,但是编辑的焦点向后跳真的很烦我。我可以看到TokenSpan的props.children中有一堆数据,当添加跨度时,必须告诉编辑器如何处理其焦点,但是我不知道如何使用它来使其表现出我想要的样子

0 个答案:

没有答案