Блог

Я работаю над панелью администратора переднего плана. Это позволяет редактировать каждый элемент / виджет на сайте.

Есть панель администратора, которая подключена к Redux и из которой вы можете активировать edition. Когда вы нажимаете на кнопку edit, появляются кнопки render EditModeButton, которые добавляются к каждому div / виджету, который имеет CSS-класс button-edit-quick-normal на странице. Пожалуйста, смотрите код ниже.

 enableEditMode = () => {

    //Catch all of div/widget with class .button-edit-quick-normal
    let buttonEditQuickNormal = [...document.querySelectorAll('.button-edit-quick-normal')];

    //loop through array of DOM elements and render new react component
    buttonEditQuickNormal.map(domContainer => {
        ReactDOM.render(<EditModeButton
            menuType={'quick-normal'}
            handleSingleMenuActivated={this.handleSingleMenuActivated}
            singleMenuActivated={this.state.singleMenuActivated}
        />, domContainer);
    });
 }
  

Мой провайдер выглядит следующим образом:

 import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
// import ThemeApp from 'SBAppsThemes/ThemeApp';
import { SiteEditorPortal } from './index_sitebuilder';
import { AdminbarPortal } from './index_adminbar';


const store = createStore(AppReducer, compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f));

       ReactDOM.render(
         <Provider store={store}>
            <React.Fragment>
                <AdminbarPortal />
                <SiteEditorPortal />
            </React.Fragment>
        </Provider>,
        document.getElementById('root-react-portals'));
  

А вот панель администратора и идентификатор SITEEID, которые защищают ReactDOM.render:

 import SiteEditor from 'SBAppsBuilder/containers/SiteEditor';
import ReactDOM from 'react-dom';
import Root from 'SiteBuilder/boot/root';

export const SiteEditorPortal = () => ReactDOM.createPortal(<SiteEditor/>, document.getElementById('root-sitebuilder'))
  

.

 import React from 'react';
import ReactDOM from 'react-dom';
import Adminbar from 'SBAppsAdminbar/Adminbar';


export const AdminbarPortal = () => ReactDOM.createPortal(<Adminbar />, document.getElementById('root'))
  

Мой вопрос в том, как добавить динамически созданные компоненты в хранилище redux?

ps. Я уже подключался к отдельному компоненту ReactDOM.render через порталы React, но в этом случае они создаются динамически.