отображение списка объектов в реаги / моб - PullRequest
Новая
       1

отображение списка объектов в реаги / моб

0 голосов
/ 25 сентября 2018

У меня есть список объектов в моем классе JSX.Давайте предположим, что это фиксированный список объектов на данный момент 

versions = [
{owner: "luca", date: "today", fw: "00"},
{owner: "thomas", date: "tomorrow", fw: "00"},
{owner: "peter", date: "yesterday", fW: "00"},];

Я пытаюсь отобразить значения этих объектов во вложенных элементах div на моей веб-странице.в основном это панель строк, которую я представляю как div.вот HTML для него 

<div className="fc-revisions-sidebar revisions-panel flex-vertical flex-grow-1">
        <div className="fc-revisions-sidebar-header fc-revisions-sidebar-header-bg-color-brand">
            <div className="fc-revisions-sidebar-title">Version history</div>
        </div>
        <div className="fc-revisions-sidebar-revisions-list-container">
            <div className="fc-revisions-sidebar-revisions-list">
                <div role="rowgroup">
                    <div className="fc-revisions-collapsible-panel" role="button">
                        <div className="fc-revisions-collapsible-panel-container">
                            <div className="fc-revisions-row fc-revisions-row-selected" role="row" aria-selected="true" aria-level="1">
                                <div className="fc-revisions-row-content-wrapper">
                                    <div className="fc-revisions-row-header fc-row-content">
                                        <div className="fc-revisions-row-text-box" rows="1" maxLength="80" aria-multiline="false">
                                            **{version.date}**
                                        </div>
                                    </div>
                                    <div className="fc-revisions-row-content fc-row-content" role="presentation">
                                        <div className="fc-revisions-row-collaborator-list">
                                            <div className="fc-revisions-row-collaborator">
                                                <span className="fc-versions-rown-collaborators-label">Created by **{version.owner}**</span>
                                                <span className="fc-revisions-row-collaborator-name">**{version.fw}**</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Я не уверен, как реализовать это в моем классе компонентов!начиная с первого div после этого 

                  <div role="rowgroup">

начинается мой HTML-код для создания каждой строки на панели.Я хочу перебрать объекты в моем списке и создать / заполнить каждую строку в моей панели нужными данными из этого списка

Я пробовал дюжину разных способов, но на моей веб-странице ничего не отображается.Я просто не понимаю, как перебирать список объектов в «версиях» и создавать / заполнять панель в процессе.

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Предположим, у вас есть массив объектов, объявленных внутри рендера с использованием const.Вы можете перебирать массив, используя .map, .forEach, для цикла и т. Д. В вашем случае я бы предпочел .map для итерации, потому что map возвращает новый массив.Поэтому внутри карты создайте элементы jsx и верните их.

Теперь возвращенные элементы jsx будут помещены в массив versionItems.Вы можете просто вызвать это с {} как выражение в рендере return. 

render(){
     const versions = [
       {owner: "luca", date: "today", fw: "00"},
       {owner: "thomas", date: "tomorrow", fw: "00"},
       {owner: "peter", date: "yesterday", fW: "00"},];

     const versionItems = versions.map((item, index) => {
      return (
         <div key={"key"+index} role="rowgroup">
              //just get all your property values here using item.owner, item.date etc
        </div>
     )
 });
    return(
         <div>
             {versionItems}
         </div>
    )
}
0 голосов
/ 25 сентября 2018

Итерация обычно выполняется путем map массива значений в массив компонентов.Примерно так: 

versions = [ ... ]

return (
  <div>
    <div>Version History</div>
    {
      versions.map(version =>
        <div key={version.date}>
          {version.date}
        </div>
      )
    }
  </div>
)

Обратите внимание, что для правильной работы сверки Reacts при возможном повторном рендеринге с новым массивом значений внешний элемент в массиве должен иметь уникальный атрибут key, чтобы Reactбыстро распознает любые удаленные или добавленные значения в массиве при следующем рендеринге.

...