ReactDOM.render не отображает все идентификаторы

Question

Я пытаюсь создать простое Chrome расширение React и борюсь с некоторыми проблемами рендеринга. Я давно не использовал vanilla JS, поэтому я буду благодарен за любую помощь!

У меня есть следующий код, который заменяет слово «коронавирус» на любой веб-странице. Он также добавляет id="root" и class="rainbow" (который меняет цвет вируса короны), которые, я надеюсь, преобразовать мой компонент приложения в идентификатор: ReactDOM.render(<App />, document.getElementById('root'))

replaceText(document.body);
function replaceText(element) {
    if (element.hasChildNodes()) {
        element.childNodes.forEach(replaceText);
    } else if (element.nodeType === Text.TEXT_NODE) {
        if (element.textContent.match(/coronavirus/gi)) {
            const newElement = document.createElement('span');
            newElement.innerHTML = element.textContent.replace(
                /(coronavirus)/gi,
                '<span id="root" class="rainbow">$1</span>'
            );
            const root = document.getElementById('root');
            element.replaceWith(newElement);
        }
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

мой простой компонент приложения:

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Welcome to React</h2>
            </div>
        );
    }
}

export default App;

Быстрый поиск в Google «коронавируса», кажется, успешно отображает только один из моих компонентов приложения. изображение поиска Google . Когда я изучил каждый элемент коронавируса, мне показалось, что каждый элемент имеет id="root" и class="rainbow".

Любое понимание или помощь были бы очень признательны!

Answer 1

В текущем коде вы говорите, что нужно найти первый элемент с идентификатором root и разместить там свой компонент. ReactDOM.render(<App />, document.getElementById('root'));

Вам нужно сообщить, что для всех элементов, соответствующих указанному c селектору, вам нужно разместить там свой компонент.

Вы можете попробовать выполнить поиск по имени класса, а затем вы нужно повторить функцию ReactDOM.render.

Проверить этот код и ящик

Я думаю, в вашем случае это будет

const divs = document.getElementsByClassName("rainbow");
for (var i = 0; i < divs.length; i++) {
  ReactDOM.render(<App />, divs.item(i));
}