Javascript 将ReactClass转换为ReactComponent ES6

我使用的Facebook固定数据表来自：

所以我尝试使用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>

var Column=FixedDataTable.Column；
var Table=FixedDataTable.Table；
var Cell=FixedDataTable.Cell；
var FilterExample=React.createClass({
render（）{
返回(
);
},
});
ReactDOM.render(
,
document.getElementById（'react'）
);

下面是使用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;

从“React”导入React；
从“react dom”导入react dom；
从“固定数据表”导入{表、列、单元格}；
变量行=[
['a1'，'b1'，'c1']，
['a2'，'b2'，'c2']，
['a3'，'b3'，'c3']
];
类DataTable扩展了React.Component{
//从存储获取初始状态
建造师（道具）{
超级（道具）；
log（“数据表构造函数”）；
this.rowGetter=this.rowGetter.bind（this）；
}
rowGetter（rowIndex）{
返回行[行索引]；
}
render（）{
返回(
);
}
}
导出默认数据表；

---

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

需要rowGetter函数

---

您的原始ES5代码中一定有错误，因为该函数是FixedDataTable使用数据填充表所必需的属性。

您的问题是什么？您需要将回调绑定到此（就像JS中来自另一个上下文的所有事件调用一样），或者您需要一个rowGetter道具，原因在第一个示例中没有解释，也没有解释？reactClass在幕后为您使用专有的createClassOk进行绑定，如果我能更好地解释一下的话：如果我删除ES6部分中的rowGetter和rows元素，它将不起作用，我不明白为什么我需要添加这些东西，因为在React类中，我没有使用rowGetter和rows，它可以工作，所以问题只是为什么需要添加方法，而不是为什么必须使用

.bind

？是的！你知道为什么我们需要添加这些方法来实现相同的功能吗？我不明白你是如何让表格在ES5版本中工作的-你需要rowGetter函数。它是如何填充数据的？您好，谢谢您的回答，我还看到rowGetter是必需的，但在ES5代码中，当我使用导入的jsx transpiler和react 0.14时，它会与之一起工作。这可能是因为ES5没有读取所需道具的throw错误或其他原因吗？您应该在控制台中收到一条关于未将参数传递给所需道具的警告。es版本的肩膀真的融入其中。无论如何，在es5版本中，您都不会在表中获得任何数据。