Функция карты в reactJs

Question

Как я могу использовать функцию карты в этом компоненте

Мои данные

Я пробовал с

                       {
                                section.post.map((news,index)=> (
                                        (index <= 1) ?
                                            <div key={index} className="col-lg-6">
                                                <StyleTwo350X390 news={news}/>
                                            </div>

                                        : (index >=2) ?
                                            <div key={index} className="col-lg-6">
                                                <StyleFour350X82 news={news}/>
                                            </div>
                                        :null
                                    ))
                            }

, но фактический результат не может быть получен из этого. (Я новичок в реакции js)

Answer 1

Не могли бы вы попробовать это? Вам не нужно отдельно проверять индекс.

 {
        section.post.map((news, index) => (
            (index < 2) ?
                <div key={index} className="col-lg-6">
                    <StyleTwo350X390 news={news}/>
                </div>
                :
                <div key={index} className="col-lg-6">
                    <StyleFour350X82 news={news}/>
                </div>
        ))
    }

Answer 2

{
    section.post.map((news,index) => (
        <div key={index} className="col-lg-6">
            news.map((news2,index2) => (
                <StyleTwo350X390 news={news2} key={'inner' + index2}/>
            )
        </div>
    ))
}

РЕДАКТИРОВАТЬ 1

Вы можете реструктурировать свои данные для выполнения sh этого. Если ваши данные похожи на следующие:

const newData = [[news0], [news1], [news2, news3, news4], [news5, news6, news7]];

Тогда вы можете использовать код, который я указал в верхней части моего сообщения.

РЕДАКТИРОВАТЬ 2

Вы можете реструктурировать свой массив следующим образом:

let newData = [];
oldData.forEach((d, idx) => {
    if (idx < 2) newData.push([d]);
    else if (idx - 2 % 3 === 0) newData.push([d]);
    else newData[parseInt((idx - 2) / 3) + 2];
});