Как правильно отрендерить данные на react с разрывом?
Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующий вывод.
Приведу стандартный пример вывода данных: app.js import React from 'react' import ReactDOM from 'react-dom' import AppReact from './app-react' const data = [ { id: 1, title: 'item1', round: [ {id: 1, total: 1000}, {id: 2, total: 2000} ] }, { id: 2, title: 'item2', round: [ {id: 1, total: 3000}, {id: 2, total: 4000} ] }, { id: 3, title: 'item3', round: [ {id: 1, total: 5000}, {id: 2, total: 6000} ] }, { id: 4, title: 'item4', round: [ {id: 1, total: 7000}, {id: 2, total: 8000} ] }, { id: 5, title: 'item5', round: [ {id: 1, total: 9000}, {id: 2, total: 10000} ] }, { id: 6, title: 'item6', round: [ {id: 1, total: 11000}, {id: 2, total: 12000} ] }, { id: 7, title: 'item7', round: [ {id: 1, total: 13000}, {id: 2, total: 14000} ] }, { id: 8, title: 'item8', round: [ {id: 1, total: 15000}, {id: 2, total: 16000} ] } ] ReactDOM.render( <AppReact data={data} />, document.getElementById('react-root') ) app-react.js import React from 'react' class AppReact extends React.Component { constructor(props) { super(props) console.log(props.data); } render() { return ( <div> { this.props.data.map((item) => { console.log('item', item); return ( <div key={item.id}> {item.title} {item.round.map((r) => { console.log('r', r); return ( <div key={r.id}> {r.total} </div> ) })} </div> ) }) } </div> ) } } export default AppReact; Подскажите, пожалуйста. Как мне сделать вывод например: первых трех элементов массива (объектов). А затем с четвертого и до конца. Вывод в html: Код:
item1 |
Часовой пояс GMT +3, время: 05:45. |