convertFromHTML返回null响应| draftjs

问题描述 投票:0回答:2

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

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

在哪里:

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

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

reactjs draftjs
2个回答
5
投票

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

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

这是我的例子

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

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

console log of convertFromHTML

有一个“有效”对象,但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: ""

genFragment chunk

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,因此contentBlocksnull


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.