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

Question

我正在尝试使用 DraftJS 创建一个编辑器，它将编辑器字段中的关联值呈现给 guid，这些值将包含在编辑器的实际字符串值中。我遇到的问题是，当我尝试在装饰器中渲染关联值而不是实际值时，编辑器开始表现得很奇怪。

示例：如果我在商店中有一个带有guid:1234和 的对象value:"example value"，如果编辑器的值为hi there {1234}我希望它通过 guid 查找对象的名称并渲染hi there <span>example value</span>..但是当我让装饰器渲染包含名称的范围时与正则表达式匹配的 GUID 的编辑器焦点开始向后跳跃。我注意到在装饰器中不渲染 {props.children} 是导致此问题的唯一原因。

这是我尝试过的...

/*This doesn't work: 
Rendering {tokenName} causes the Editor's focus to jump backwards 
when the new <span> gets inserted
*/

const TokenSpan = (props) => {
    let tokenGuid = props.decoratedText;
    let tokenName = getTokenNameById(tokenGuid);
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {tokenName}
        </span>
    );
};

/* This does work, but I don't want to render {props.children} - 
how do I do this?? 
*/
const TokenSpan = (props) => {
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {props.children}
        </span>
    );
};

我希望能够将我想要的任何内容渲染到装饰器组件中，而不会对编辑器的焦点产生奇怪的问题。我将这些装饰器耦合到 IMMUTABLE 实体，这些实体的行为似乎符合我的预期，但编辑器的焦点跳过倒退真的很烦我。我可以看到 TokenSpan 的 props.children 中有一大堆数据，它们必须告诉编辑器在添加跨度时如何处理其焦点，但我不知道如何使用它来使其按照我想要的方式运行。