добавление реагирующих компонентов к элементу dom из цикла

Question

У меня есть сетка на основе столбцов, где я пытаюсь добавлять миниатюры по горизонтали. Для этого я написал простой l oop, где я выбираю столбцы и добавляю Thumbnail компонент к этому элементу. Вот код, который я написал -

    for (let i = 0; i < this.state.thumbnails / this.state.cols; i++)
    {
        let columns = document.getElementsByClassName('column');
        for (let i = 0; i < columns.length; i++)
        {
            let element = columns.item(i)
            Object.keys(element).push(<Thumbnail href="https://picsum.photos/200/300" />);
        }
    }

, однако в столбец ничего не добавляется. Я не уверен, как добавить компонент реагирования в DOM, и этот эксперимент был дикой догадкой. Может кто-нибудь помочь, указав, что здесь не так?

Answer 1

В React вы не просто «добавляете» компоненты к произвольному элементу DOM. С точки зрения React, после рендеринга DOM он остается неизменным, и единственный способ что-либо изменить - это повторно отобразить рассматриваемый компонент (-ы).

Если вам абсолютно необходимо go по маршруту «добавления» (например, вы имеете дело с сторонним кодом, который вы не можете изменить), тогда вам следует рассмотреть возможность использования jQuery или Zepto вместо этого и изменить DOM напрямую.

С React вы обычно делаете две вещи:

• Создайте список компонентов (например, эскизы) - часто это будет массив
• Визуализация массива в контейнере родительского компонента

Обе эти вещи обычно происходят в методе родительского компонента render.

Надеюсь, это поможет!