ReactDOM render -> DOMParser -> querySelectorAll -> возвращающий ноль

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 исправило это.