Блог

Главная - Вопросы по программированию - Условная визуализация и перенос двух или более элементов с одинаковым типом в React

Условная визуализация и перенос двух или более элементов с одинаковым типом в React

#javascript #reactjs

#javascript #reactjs

Вопрос:

Итак, вот моя структура данных:

 components: [
 {code: "CMSParagraph_1610632439131", type: "CMSParagraph", version: "Staged",…}
 {code: "CMSImageZoom_1610618563282", type: "CMSImageZoom", version: "Staged",…}
 {code: "CMSImageZoom_1610556075701", type: "CMSImageZoom", version: "Staged",…}
 {code: "CMSParagraph_1610632439131", type: "CMSTitle", version: "Staged",…}
]

Я хочу отображать элементы с одинаковым типом, сгруппированные по div

что-то вроде :

 <div>cmsParagraph</div>
<div class="wrapper">
  <div>cmsImageZoom</div>
  <div>cmsImageZoom</div>
</div>
<div>cmsParagraph</div>

Как я могу этого добиться, есть идеи !?

Ответ №1:

Надеюсь, я правильно понял, о чем вы говорили. Что-то вроде этого может сработать:

 let types = {};
for (let ele of components) {
  if (types[ele.type] === undefined) {
    types[ele.type] = [];
    types[ele.type].push({ ...ele });
  } else {
    types[ele.type].push({ ...ele });
  }
}

return ({
    Object.keys(types)
      .map((i) => {
        return types[i];
      })
      .map((arrOfTypei) => {
        <div>
           {  arrOfTypei.map((ele) => {
              return <Comp data={ele}/>
           })  }
        </div>
      })
});

Мы можем просто хранить отдельные типы в отдельных массивах, а затем отображать каждый из этих массивов в отдельные div.

Комментарии:

1. Проблема здесь в том, что каждый из элементов будет обернут div, я хочу, чтобы только некоторый элемент с определенным типом переносился внутри div. остальные остаются незатронутыми

Ответ №2:

Желаемое поведение находится внутри функции отображения, если два элемента с одинаковым типом располагаются друг за другом, я хочу обернуть их внутри div, и только если их тип соответствует определенному типу, если нет, я собираюсь вернуться.

Вот как я этого добиваюсь:

 let arr = [];
const compoData = data amp;amp; data.compo ? data.compo.containers : []
compoData.map((compo, index) => {

 let content = [];
 const {type} = compData;
 const cmp = <cmp {...props}>
 
 if(type === 'x') {
  arr.push(cmp)
 }else{

  if(arr amp;amp; arr.length) {
     content.push(
      <TypeWrapper>{arr}</TypeWrapper>
     )
     arr = []
  }
  content.push(cmp)

 }

 if(!compoData[index  1]) {
    content.push((
      <TypeWrapper>{arr}</TypeWrapper>
    ))
 }

 return content amp;amp; content

}
Метки: