Всем привет. Ребята, подскажите, пожалуйста, как решить следующую задачу. Есть у меня компонент, который рендерит динамически компоненты по типу. Сейчас это происходит следующим образом: один под другим. Как в данном случае правильно сделать, если, мне нужно, чтобы компонент Title (все элементы) в section.
Что бы получилось, что-то вроде этого:
<main>
<section>
<Title />
<Title />
<Title />
</section>
<New />
</main>
Структуру данных менять нельзя.
const Factory = ({ widget }) => {
const widgetType = widget.type.toLowerCase()
const Component = components[widgetType]
if (widgetType === 'title') {
// я так понимаю, вот здесь должна быть логика
}
return (
<Component widget={widget} />
)
}
dmitry
18.Февраль.2020 13:45:50
2
gsdev99:
Сейчас это происходит следующим образом: один под другим. Как в данном случае правильно сделать, если, мне нужно, чтобы компонент Title (все элементы) в section.
Будет удобно сделать из начальной структуры вида
[
{type: 'a', ...}
{type: 'b', ...}
{type: 'a', ...}
]
Структуру вида
{
'a' : [{type: 'a', ...}, {type: 'a', ...}]
'b' : [{type: 'b', ...}]
}
и отрендерить последнюю. Для каждого ключа из этого объекта будет своя секция section
.
Примерный код:
function getMapByName(componentsArr) {
return componentsArr.reduce((res, componentData) => {
const type = componentData.type
if (!res[type]) {
res[type] = []
}
res[type].push(componentData)
}, {})
}
function Components(componentsData) {
const map = getMapByName(componentsData)
return <React.Fragment>
Object.keys(map).map((componentType) => {
const components = map[componentType]
// key нужен для каждого элемента внутри массива: ограничение реакта
return <section key={componentType}>
{components.map((componentData, index) => {
return <Factory component={componentData} key={index} />
})}
</section>
})
</React.Fragment>
}