我一直在对这个主题进行一些研究,现在我已经与Grid,List和MultiGrid一起使用了反应虚拟化并且让它们正常工作。我曾经在桌子上遇到过一些问题。尽管我没有遵循所有说明和文档,但我似乎无法正确地呈现表格列,尽管我还没有能够使其正常工作,但我们将非常感谢任何帮助。
import React, { Component } from 'react';
import 'react-virtualized/styles.css';
import {Table, Column, AutoSizer} from 'react-virtualized';
const data = [
{rsid:'10001',gene:'BRCA1',chr_position:'1000000',allele:'C'},
{rsid:'10011',gene:'BRCA1',chr_position:'1000001',allele:'D'},
{rsid:'10021',gene:'BRCA1',chr_position:'1000002',allele:'C'},
{rsid:'10031',gene:'BRCA1',chr_position:'1000003',allele:'C'},
];
class ExpectoSnpTable extends Component{
constructor(props){
super(props);
}
render() {
return(
<div>
<Table
height={500}
rowGetter={({index}) => data[index]}
rowCount={data.length}
rowHeight={40}
width={500}
headerHeight={20}
>
<Column
dataKey='rsid'
width={100}
headerRenderer={({dataKey})=> 'rsid'}
/>
<Column
dataKey='gene'
width={100}
headerRenderer={({dataKey})=> 'gene'}
/>
<Column
dataKey='chr_position'
width={200}
headerRenderer={({dataKey})=> 'chr_position'}
/>
<Column
dataKey='allele'
width={100}
headerRenderer={({dataKey})=> 'allele'}
/>
</Table>
</div>
);
}
}
export default ExpectoSnpTable;