ReactDOM 渲染 -> DOMParser -> querySelectorAll -> 返回 null答案

【问题标题】：ReactDOM render -> DOMParser -> querySelectorAll -> returning nullReactDOM 渲染 -> DOMParser -> querySelectorAll -> 返回 null
【发布时间】：2018-08-17 04:10:22
【问题描述】：

const temp = document.createElement('div');
ReactDOM.render(component, temp);
const parsed = new DOMParser().parseFromString(
  temp.innerHTML,
  'text/html'
);
parsed.querySelectorAll(selector); // <- returns null rather than NodeList

^ 在我的应用程序中有一个晦涩的用例，主要围绕需要渲染组件的完整树并查询它以查找某些 css 类以区分外部样式表中的规则子集。

不要评判！ :-)

我认为我这样做的方式是我可以合理地期望给我一个正确的结果，但显然我错过了一些东西。

【问题讨论】：

我创建了一个简单的示例，可以很好地处理我制作的虚拟数据。 component 和 selector 是什么？这些是唯一可能与我创建的简单测试用例不同的地方。

标签： reactjs domparser react-dom selectors-api

【解决方案1】：

const temp = document.createElement('div');
ReactDOM.render(component, temp, () => {
  const parsed = new DOMParser().parseFromString(
    temp.innerHTML,
    'text/html'
  );
  const selected = parsed.querySelectorAll(selector);
});

与许多此类错误一样，这归结为一种竞争条件。渲染花费的时间足够长，以至于 parseFromString 的第一个参数无法同步使用。使用 ReactDOM.render 的可选回调修复了这个问题。

【讨论】：