Как удалить теги style?

Question

[cracker-test]

Получаю html с бекенда. Теги html содержат style теги. Возможности отредактировать html на бекенде никакой нет. Как можно в реакте удалить тегти style для всех элементов, которые создаются определенным компонентом?

Answer 1

[Даниил]

Используйте JS и удаляйте через него:

removeStyleTags() {
    const elements = document.querySelectorAll('.компонент'); // Замените на ваш класс компонента
    elements.forEach(element => {
      const styleTags = element.querySelectorAll('style');
      styleTags.forEach(tag => {
        tag.parentNode.removeChild(tag);
      });
    });
  }

Что-то такого плана.

Comments

[cracker-test]

не работает

[Даниил]

cracker-test, я дал пример как в теории это можно сделать. Под себя сам подстраивай.

[cracker-test]

Даниил, хотя бы функцию в js написали без ошибки

[Даниил]

cracker-test, ну так и пиши сам.Я дал тебе направление.
Тут не форум для получения готового кода.

Answer 2

[Aetae]

Почему ты не можешь повлиять на бэкэнд? Парсишь небось?
Причём тут реакт? Реакт рисует элементы и стили на лету, а не получает их с бэкэннда.

Если таки с бэка приходит html строка, которая потом вставляется через dangerouslySetInnerHTML то предварительно её почистить можно так:

function removeStyles(html) {
  const container = document.createElement('div');
  container.innerHTML = html;
  container.querySelectorAll('style').forEach(
    style => style.remove()
  );
  return container.innerHTML;
}

Если ты пуляешь напрямую чужой реакт код, то тут два варианта:
1. Делать как указал Даниил , только при этом ещё и динамически, дожидаясь пока реакт их нарисует, для чего придётся использовать MutationObserver или банальный setTimeout. Однако в таком случае стили могут успеть отрисоваться до удаления, из-за чего может происходить мерцание.
2. Лезть глубже в исходники и патчить: подменять react функции работы со стилями, или даже тупо document.createElement, отфильтровая ненужный style. Но всё это уже требует понимания.:)