0

我正在使用来自以下网址的 Facebook 固定数据表：https ://github.com/facebook/fixed-data-table

所以我正在尝试使用 ES6 将 ReactCreateClass 组件转换为 React 组件，这里是 React Class ：

<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;

它工作正常，但我不明白为什么我需要使用 bind 方法在 React ES6 组件中添加 rowGetter 方法和属性。如果我需要将其他 React 组件从 facebook 或其他转换为 ES6，这将非常冗长且混乱。为什么我不能直接将渲染方法从 ReactClass 复制并粘贴到 ES6 中的 React 组件？

4

1 回答 1

0

rowGetter 函数是必需的。

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

在您的原始 ES5 代码中一定是一个错误，因为该函数是 FixedDataTable 的必需属性，它可以用数据填充表。

于 2015-11-13T16:30:50.743 回答