React Redux append components

Question

У меня есть проект, над которым я работаю, который является создателем HTML-страниц. Пользователь может выбрать из списка предварительно разработанных разделов HTML-страницы (заголовок, слайдеры, блоки контента, нижние колонтитулы и т. Д.) Из меню и отбросить их на холст, чтобы создать веб-страницу. Конечным результатом является загружаемый zip-файл, содержащий статический веб-сайт.

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

У меня есть часть 1,2 & 3 охвачены. Часть 4, выдвижной ящик с выдвижным ящиком, содержит разделы HTML, и при нажатии меня хотел бы добавить соответствующий компонент в основную область страницы, этот процесс будет повторяться до тех пор, пока веб-страница не будет построена. Затем каждый компонент может быть отредактирован и впоследствии сохранен как страница.

Что я ищу совет, как, используя React/Redux, добавлю компоненты к основной области onclick?

Предполагаю, что я посылаю действие/редуктор, ссылаясь на компонент, но как я могу добавить и отслеживать компоненты, присоединенные к основной области? Используя jQuery, это будет простой jQuery .load(), но в React/Redux я понятия не имею, может быть, трюк, который я могу использовать с помощью React Router?

Может ли кто-нибудь помочь указать мне в правильном направлении? Дальнейшее чтение и т.д.

Большое спасибо заранее.

Answer 1

Неправильно, вам нужно сопоставить определенный тип идентификатора для каждого компонента, затем сохранить эти идентификаторы в магазине, например, mainArea = [id1, id6, id12] и т. Д. Затем ваш компонент <MainArea /> просто выполняет итерации по реквизитам и ссылается на вашу установленную карту, чтобы загрузить правильную компоненты.

Редактировать: Уточнить, как использовать карту компонентов.

Это будет примерно то, что вы ищете. Предположим, что идентификаторы выше - наши компоненты. Где-то в нашем коде мы имели бы отображение этих идентификаторов компонентов:

const Component1 = React.createClass(...) 
const Component6 = React.createClass(...) 
const Component12 = React.createClass(...) 

const componentMap = { 
    id1: Component1, 
    id6: Component6, 
    id12: Component12, 
} 

Затем, когда ваш <MainArea /> компонент перебирает идентификаторы, что хранящиеся он будет тянуть соответствующий компонент из отображения выше, и делает это.