如何合并多个draft-js ContentState答案

【问题标题】：How to merge multiple draft-js ContentState's如何合并多个draft-js ContentState
【发布时间】：2019-08-20 11:03:54
【问题描述】：

我有多个draft-js ContentStates 的集合，我想将它们合并在一起以将它们显示在一个<Editor /> 中

为什么？ 通过我的 GUI，您可以单独编辑文本 sn-ps，然后稍后将它们连接在一起。然后您会看到生成的文本，您仍然可以再次对其进行编辑。

我坚持个人ContentStates如下：

const contentState = EditorState.getCurrentContent();
const raw = convertToRaw(contentState);

这给了我一个像这样的对象：

{
   blocks: [...],
   entityMap: {...}
}

我尝试的是手动合并blocks 和entityMap，以获得原始的contentState，然后我可以使用convertFromRaw 解析它

但是，每个块都有一个所谓的唯一键，在不同的 contentState 上，这些键重叠并且不是唯一的。

所以这种情况下的结果是某些块被具有相同键的其他块覆盖。

有没有人想出一种更简单的方法来实现我正在做的事情？

【问题讨论】：

标签： javascript reactjs draftjs

【解决方案1】：

draft.js 中有一个生成唯一键的函数：

import { genKey } from 'draft-js'

如果您查看它的代码，您会发现它是有状态的（看到 seenKeys?）：

const seenKeys = {};
const MULTIPLIER = Math.pow(2, 24);
  
function generateRandomKey(): string {
    let key;
  
    while (key === undefined || seenKeys.hasOwnProperty(key) || !isNaN(+key)) 
    {
       key = Math.floor(Math.random() * MULTIPLIER).toString(32);
    }
  
    seenKeys[key] = true;
    return key;
}
  
module.exports = generateRandomKey;

所以我相信，您可以通过映射块并重新生成它们的密钥来解决您的问题（我将使用 Ramda 来获得更简洁和富有表现力的代码）：

import * as R from 'ramda'

const mergedObjectWithOverlappingKeys = {
   blocks: [...],
   entityMap: {...}
}

const result = R.evolve({
   blocks: R.map(R.assoc('key', genKey())),
})(mergedObjectWithOverlappingKeys)

【讨论】：