Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2018, 12:43
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

React.js как правильно создать динамическую html структуру из данных?
Здравствуйте. Подскажите пожалуйста как мне решить следующую задачу. У меня есть некое количество 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение данных из iframe отличных от html Telnet Events/DOM/Window 0 29.05.2015 17:14
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 21:34
Ajax и три <form> не работает. Как правильно сделать листание записей из базы данных? vlad275 AJAX и COMET 2 14.12.2009 14:04
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
как можно создать iframe со скриптами GOll Общие вопросы Javascript 2 05.05.2009 11:32