Javascript.RU

 
 
Опции темы
 
Старый 28.01.2019, 19:35
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Как правильно отрендерить данные на 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
1000
2000
item2
3000
4000
item3
5000
6000

разделитель

item4
7000
8000
item5
9000
10000
item6
11000
12000
item7
13000
14000
item8
15000
16000
 

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Контекстное меню как считать данные из таблицы xela1980 jQuery 25 31.05.2013 14:20
Как правильно отправлять данные Mukhtar AJAX и COMET 9 05.03.2013 09:56
Как подгрузить данные с чужого домена, XSS-proof? Actine AJAX и COMET 6 03.09.2011 22:08
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19


© Илья Кантор, 2007-2021 О проекте - Архив форума - Вверх