将ReactClass转换为ReactComponent ES6

Convert ReactClass to ReactComponent ES6

本文关键字:ReactComponent ES6 转换 ReactClass      更新时间:2023-09-26

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

因此,我尝试使用ES6将ReactCreateClass组件转换为React组件,这是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;

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

rowGetter函数是必需的。

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

它一定是原始ES5代码中的一个错误,因为该函数是FixedDataTable的必需道具,它可以用数据填充表。