将 ReactClass 转换为 ReactComponent ES6答案

【问题标题】：Convert ReactClass to ReactComponent ES6将 ReactClass 转换为 ReactComponent ES6
【发布时间】：2016-02-15 03:28:03
【问题描述】：

我正在使用来自 https://github.com/facebook/fixed-data-table 的 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>

这里是使用 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 组件？

【问题讨论】：

您的问题是什么？您需要将回调绑定到this（例如对于来自 JS 中另一个上下文的所有事件调用），或者您需要有一个 rowGetter 道具，原因未在第一个示例中进行解释？ reactClass 使用专有的 createClass 在幕后为您绑定
好的，如果我想更好地解释一下：如果我删除 ES6 部分中的 rowGetter 和 rows 元素，它就不起作用，我不明白为什么我需要添加这些东西，因为在React Class 我没有使用 rowGetter 和 rows，它可以工作
所以问题只在于为什么需要添加该方法，而不是为什么必须使用.bind？
是的，没错！你知道为什么我们需要添加这些方法来实现相同的功能吗？
我不明白你是如何让表格在你的 ES5 版本中工作的——你需要那个 rowGetter 函数。它是如何填充数据的？

标签： javascript reactjs ecmascript-6 fixed-data-table

【解决方案1】：

需要rowGetter函数。

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

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

【讨论】：

您好，感谢您的回答，我还看到 rowGetter 是必需的，但是在 ES5 代码中，当我使用它与导入的 jsx 转换器并反应 0.14 的代码时。这可能是因为 ES5 没有读取所需道具或其他东西的抛出错误吗？
您应该在控制台中收到关于未将参数传递给所需道具的警告。 es版的肩膀真的进了。无论哪种方式，您都不会在 es5 版本的表中获得任何数据。