convertFromHTML返回null响应| draftjs

Question

我确信我做错了什么。但是，一个简单的空html标记就会产生convertFromHTML调用的问题。

convertFromHTML("<p>  </p>"); // returns null

在哪里：

convertFromHTML("<p>empty</p>"); // returns a valid object.

任何想到的儿子为什么会发生这种情况？

Answer 1

convertFromHTML("<p> </p>"); // returns null

我假设“返回null”是字面意思，在这种情况下更新到最新的draft-js版本应该解决问题。

这是我的例子

• create-react-app V1.5.2
• draft-js v0.10.5

console.log(convertFromHTML('<p> </p>'))

有一个“有效”对象，但contentBlocks属性是null，这意味着我们无法创建有效的ContentState，因为您将得到以下内容：

TypeError: Cannot read property 'contentBlocks' of null

有关它为什么会发生的任何想法？

简答：HTML节点需要文本。

深入解答：

以下所有代码均来自最新版本的draft-js source（撰写本文4c4465f）。为简洁起见，省略了一些方法部分。

方法convertFromHTMLtoContentBlocks是这个模块所称的方法，它有几个主要步骤：

1. 处理html字符串
2. 从字符串创建DOM
3. 从DOM生成块
4. 将块映射到contentBlocks对象

1）将字符串处理为DOM html由getChunkForHTML方法处理，qzxswpoi是从中创建contentBlocks的输出。

const convertFromHTMLtoContentBlocks = (
  html: string,
  DOMBuilder: Function = getSafeBodyFromHTML,
  blockRenderMap?: DraftBlockRenderMap = DefaultDraftBlockRenderMap,
): ?{contentBlocks: ?Array<BlockNodeRecord>, entityMap: EntityMap} => {

  const chunkData = getChunkForHTML( // processing our html string into chunkData
    html,
    DOMBuilder,
    blockRenderMap,
    DraftEntity,
  );

  // use the chunkData to create contentBlocks
  const {chunk, entityMap} = chunkData;
  const contentBlocks = convertChunkToContentBlocks(chunk);

  return {
    contentBlocks,
    entityMap,
  };
};

检查getChunkForHTML，我们看到白色空间被修剪为<p></p>并传递给DOMBuilder。由DOMBuilder创建的DOM由genFragment转换为块，装饰并作为chunk返回。

const getChunkForHTML = (
  html: string,
  DOMBuilder: Function,
  blockRenderMap: DraftBlockRenderMap,
  entityMap: EntityMap,
): ?{chunk: Chunk, entityMap: EntityMap} => {
  html = html  // the string is trimmed
    .trim()
    .replace(REGEX_CR, '')
    .replace(REGEX_NBSP, SPACE)
    .replace(REGEX_CARRIAGE, '')
    .replace(REGEX_ZWS, '');

  const safeBody = DOMBuilder(html); // create DOM from trimmed html
  if (!safeBody) {
    return null;
  }

  const fragment = genFragment( 
    entityMap,
    safeBody,   // use DOM to create blocks in genFragment
    OrderedSet(),
    'ul',
    null,
    workingBlocks,
    -1,
    blockRenderMap,
  );


  let chunk = fragment.chunk;
  const newEntityMap = fragment.entityMap;

  // rest of method
  return {chunk, entityMap: newEntityMap};
};

2）从字符串创建DOM如果我们在调试器中检查DOMBuilder方法（getSafeBodyFromHTML的别名）（source），我们会看到我们得到一个具有以下属性的DOM节点：

innerHTML: "<p></p>"
innerText:""

3）从DOM生成块DOMBuilder的输出是genFragment作为safeBody的参数。此方法将DOM树处理为块。鉴于我们的DOM不包含文本，从genFragment返回的对象具有属性：text: ""。

4）将块映射到contentBlocks

convertFromHTMLtoContentBlocks的最后一个电话是

const contentBlocks = convertChunkToContentBlocks(chunk);：

const convertChunkToContentBlocks = (chunk: Chunk): ?Array<BlockNodeRecord> => {
  if (!chunk || !chunk.text || !Array.isArray(chunk.blocks)) {
    return null;
  }
  // rest of method
}

显然，在这一点上，chunk.text返回false，因此contentBlocks是null。

Answer 2

我遇到了类似的问题并使用draft-js v0.10.4解决了它。希望这对你也有用:)