Отрисовка таблицы построчно по ключу из списка объектов

Я пытаюсь привязать свои данные к blueprint.jsTable, однако в документации неясно, как это сделать. Как мне создать пользовательскую функцию рендеринга для blueprint.jsTable для рендеринга ключа из списка объектов?

В примере по умолчанию передается rowIndex.

Код:

data = [
  { name: "L/S", col2: "abc" }, 
  { name: "HY", col2: "def" }
];

myRender = (rowIndex: number, key: string) => {
  return <Cell> {this.data[rowIndex][key]} </Cell>;
};

<Table numRows = {2}>
  <Column name = "not-working" cellRenderer = {this.myRender("name")} />
  <Column name = "not-working2" cellRenderer = {this.myRender("col2")} />
</Table>;

Ошибка:

TypeError
Cannot read property 'undefined' of undefined

  18 | 
  19 | myRender = (rowIndex: number, key: string) => {
> 20 |   return <Cell> {this.data[rowIndex][key]} </Cell>;
     |                                     ^
  21 | };

См. Пример здесь: https://codesandbox.io/s/k9l9q2150r

Документы: https://blueprintjs.com/docs/#table.basic-usage

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
652
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

cellRenderer ожидает функцию, которая принимает rowIndex в качестве аргумента. Итак, что вам нужно сделать:

myRender = (key: string) => (rowIndex: number) => {
  return <Cell>{this.data[rowIndex][key]}</Cell>;
};

А вот и песочница

Другие вопросы по теме