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

Question

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 类以针对规则子集进行差异化在外部样式表中。

不要评判！ :-)

我认为我正在以一种我可以合理期望给我正确结果的方式进行上述操作，但显然我遗漏了一些东西。

Answer 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 的可选回调解决了这个问题。

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

ReactDOM render -> DOMParser -> querySelectorAll -> returning null

selectors-api

domparser

reactjs

react-dom