Задать вопрос
@s24344
react

React.js как правильно создать динамическую html структуру из данных?

Здравствуйте. Подскажите пожалуйста как мне решить следующую задачу. У меня есть некое количество json данных.
Здравствуйте. Подскажите пожалуйста как мне решить следующую задачу. У меня есть некое количество json данных.
{
  "cards": [
    { "id": "1", "content": "Lorem ipsum dolor sit amet." },
    { "id": "2", "content": "Lorem ipsum dolor sit amet." },
    { "id": "3", "content": "Lorem ipsum dolor sit amet." },
    { "id": "4", "content": "Lorem ipsum dolor sit amet." },
    { "id": "5", "content": "Lorem ipsum dolor sit amet." },
    { "id": "6", "content": "Lorem ipsum dolor sit amet." },
    { "id": "7", "content": "Lorem ipsum dolor sit amet." }
  ]
}

Я получаю эти данные и передаю через props в компонент.
// this.cardsData, это данные

ReactDOM.render(
    <NewsFeedPreviewList
        list={this.cardsData}
    />,
    document.querySelector('[data-dc-news-feed-preview-ref="primary-wrapper"]'));

NewsFeedPreviewList.js

class NewsFeedPreviewList extends Component {
  renderNewsFeedPreview = (list) => {
    let template = null;
    template = list.map((item, i) => {
      return (
          <PlayerCardRow
              key={i}
              item={item}
          />
      );
    });
    return template;
 }
 
  render() {
    return (
      <div className="news-feed-preview__layout">
        { this.renderNewsFeedPreview(this.props.list) }
      </div>
    );
  }
}

Мне бы хотелось реализовать следующую логику:
Мне необходимо установить по следующему принципу вот такую структуру, например:
<div className="section">
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 0</a>
  </div>
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 1</a>
  </div>
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 2</a>
  </div>
</div>

<div className="section">
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 3</a>
  </div>
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 4</a>
  </div>
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 5</a>
  </div>
</div>

<div className="section">
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 6</a>
  </div>
  <div className="section__item">
    <a>Здесь будут элементы массива с индексом 7</a>
  </div>
</div>
  • Вопрос задан
  • 80 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Режете массив на куски - будет массив массивов. И обходите его, внешний цикл создаёт элементы .section, внутренний - .section__item:

class App extends React.Component {
  state = {
    cards: Array.from({ length: 7 }, (_, i) => ({
      id: i + 1,
      content: Math.pow(i, 3),
    })),
  }

  addElem = () => {
    this.setState(({ cards }) => ({
      cards: [ ...cards, {
        id: cards.length + 1,
        content: Math.random().toString(16).slice(2),
      } ],
    }));
  }

  render() {
    const { cards } = this.state;
    const chunkLen = 3;
    const chunks = Array.from(
      { length: Math.ceil(cards.length / chunkLen) },
      (_, i) => cards.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button onClick={this.addElem}>add new element</button>
        {chunks.map(n => (
          <div className="section">
            {n.map(m => (
              <div className="section__item">
                <a>#{m.id} {m.content}</a>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend developer (React)
Баланс-Платформа • Москва
До 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Написать бота Telegram [ТЗ в описании]
16 апр. 2024, в 18:28
1000 руб./за проект
Интеграция-сборка сайта на ModX
16 апр. 2024, в 18:09
45000 руб./за проект
Написать скрипт на Python для уникализации и склейки видео
16 апр. 2024, в 17:36
15000 руб./за проект
Ещё заказы