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->返回空值

1 个答案: