时间戳

首页 > 解决方案 > ReactDOM 渲染 -> DOMParser -> querySelectorAll -> 返回 null

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

问题描述

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 类，以便与外部样式表中的规则子集进行比较。

不要评判！:-)

我认为我正在以一种我可以合理地期望给我一个适当的结果的方式来做上述事情，但显然我错过了一些东西。

标签： reactjsdomparserreact-domselectors-api

解决方案

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 的可选回调修复了这个问题。

推荐阅读