将ReactClass转换为ReactComponent ES6
Convert ReactClass to ReactComponent ES6
我正在使用来自以下位置的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的必需道具,它可以用数据填充表。
相关文章:
- ES6构造函数返回基类的实例
- 如何在下面的ES6循环中获得前面的文本
- es6 相当于下划线查找位置
- 如何在Javascript/ES6中的Aurelia浏览器应用程序中使用AWS S3
- ES6生成器:.next()的输入值
- 简单的ES6承诺问题-交换解决和拒绝参数
- 映射数组ES6时考虑空值
- @@(“at at”)在ES6 JavaScript中是什么意思
- 在ES6中,模块将导致多个网络调用,因为两个模块不能在单个文件中定义
- ES6是否引入了一种机制来生成块范围的函数语句(而不是表达式)
- 使用Ember-cli项目中的ES6库
- JShint-.jshintrc中的ES6有esversion,但仍收到警告(使用atom)
- 在ES6 Promise中,我应该在解决/拒绝之前使用return吗
- Unexpected Transpile ES6>ES5
- 可以合并或嵌套ES6导入
- ES6 模板文字是否比 eval 更安全
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 数组值的排序以匹配另一个数组ES6
- 在es6中,将带有回调的事件侦听器设置为可迭代的
- 将ReactClass转换为ReactComponent ES6