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 メソッドと属性を追加する必要がある理由がわかりません。Facebookやその他のReactコンポーネントをES6に変換する必要がある場合、非常に長くて面倒です。render メソッドを ReactClass から ES6 の React Component にコピー アンド ペーストできないのはなぜですか?

4

1 に答える 1

0

rowGetter 関数が必要です。

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

元の ES5 コードでは間違いだったに違いありません。その関数は FixedDataTable がテーブルにデータを入力するために必要な小道具であるためです。

于 2015-11-13T16:30:50.743 に答える