Преобразование ReactClass в ReactComponent ES6

Question

Я использую таблицу Facebook неподвижных данных от: https://github.com/facebook/fixed-data-table

Так что я пытаюсь преобразовать компонент ReactCreateClass к React компонентов с использованием ES6, здесь в React Класс:

<link rel="stylesheet" type="text/css" href="dist/fixed-data-table.css" /> 
<script src="dist/fixed-data-table.js"></script> 
<script type="text/jsx"> 

var Column = FixedDataTable.Column; 
var Table = FixedDataTable.Table; 
var Cell = FixedDataTable.Cell; 


var FilterExample = React.createClass({ 
    render() { 
    return (
     <Table 
    rowHeight={50} 
    rowsCount={1} 
    width={5000} 
    height={5000} 
    headerHeight={50}> 
    <Column 
     header={<Cell>Col 1</Cell>} 
     cell={<Cell>Column 1 static content</Cell>} 
     width={2000} 
    /> 
    <Column 
     header={<Cell>Col 2</Cell>} 
     cell={<Cell>Column 2 static content</Cell>} 
     width={2000} 
    /> 
    </Table> 
    ); 
    }, 
}); 

ReactDOM.render(
    <FilterExample />, 
    document.getElementById('react') 
); 

</script> 

И вот результат использования React ES6:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Table, Column, Cell} from 'fixed-data-table'; 

var rows = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'] 
]; 

class DataTable extends React.Component{ 



    // Get initial state from stores 
    constructor(props) { 
    super(props); 
    console.log("Datatable constructor"); 
    this.rowGetter = this.rowGetter.bind(this); 
    } 

    rowGetter(rowIndex) { 
    return rows[rowIndex]; 
    } 

    render() { 
    return (
     <Table 
     rowHeight={50} 
     rowsCount={rows.length} 
     rowGetter={this.rowGetter} 
     width={100} 
     height={250} 
     headerHeight={50}> 
     <Column 
      label="Col 1" 
      width={300} 
      dataKey={0} 
      /> 
     <Column 
      label="Col 2 " 
      width={40} 
      dataKey={1} 
      /> 
     <Column 
      label="Col 3" 
      width={30} 
      dataKey={2} 
      /> 

     </Table> 
    ); 
    } 
} 

export default DataTable; 

Это работает нормально, но я не понимаю, почему мне нужно добавить rowGetter м ethod и атрибут в компоненте React ES6 с методом связывания. Если мне нужно преобразовать другой компонент React из facebook или другого в ES6, он будет очень длинным и беспорядочным. Почему я не могу просто скопировать и вставить метод визуализации из ReactClass в компонент React в ES6?

Answer 1

Требуется функция rowGetter.

https://facebook.github.io/fixed-data-table/api-table.html

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