Отображение списка объектов JSON в сетке с виртуализированной реакцией.

Как отобразить список объектов с виртуализированной реакцией в сетке.

В документации показано, как перебирать функцию cellRenderer, но я бы хотел перебрать объекты JSON.

cellRenderer ({ columnIndex, key, rowIndex, style }) {
   return (
     <div
       key={key}
       style={style}>
       {this.state.list[rowIndex][columnIndex]}
     </div>)
}

// in render()

<Grid
      cellRenderer={this.cellRenderer}
      columnCount={list[0].length}
      columnWidth={100}
      height={200}
      rowCount={list.length}
      rowHeight={30}
      width={1000}
/>

Как адаптировать эту функцию для отображения объектов JSON вместо списка строк?

Используя примеры из react-virtualized, я смог отображать массивы массивов строк, у меня уже есть таблица, которая отображает объекты данных, и я хотел, чтобы она прокручивалась без потери производительности. Так что для меня реакция-виртуализация была самым известным вариантом.

Но есть ли другой способ отображать настраиваемый контент (например, объекты JSON через виртуализированную библиотеку)?

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


reactjs json datatable react-virtualized
person awzx    schedule 07.08.2017    source источник
comment
Не уверен, о чем вы здесь спрашиваете. Обновите вопрос, чтобы предоставить дополнительную информацию или примеры.   -  person bvaughn    schedule 07.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

Один из способов воспользоваться преимуществами прокручиваемой сетки без переписывания всего дизайна рендеринга - это визуализировать внутри cellRenderer DataTable, сгенерированный другим методом:

cellRenderer ({ columnIndex, key, rowIndex, style }) {
  const {
    myWideDataTable
  } = this.state

  return (
    <div
      {myWideDataTable}
    </div>)
}

// in render()

<Grid
  cellRenderer={this.cellRenderer}
  columnCount={1}
  columnWidth={1000}
  height={1000}
  rowCount={1}
  rowHeight={30}
  width={1000}
/>

Надеюсь, это может кому-то помочь.

person awzx    schedule 07.08.2017
comment
Это одно из решений, которое не сработает, если вы хотите редактировать содержимое в зоне прокрутки. - person awzx; 07.08.2017