我使用 react-datagrid 来表示我的文档表,但我无法弄清楚如何用完整数据实例化 render() 范围。它总是在没有数据的情况下实例化。
这是我的数据网格
'use strict';
var React = require('react')
var DataGrid = require('react-datagrid')
var columns = [
{ name: 'id', title: '#', width: 50 },
{ name: 'business_id', flex: 1 },
{ name: 'lastName' },
{ name: 'city', flex: 1 },
{ name: 'country', flex: 1 },
{ name: 'email', width: 200 }
]
var App = React.createClass({
initData: function(documents){
if(documents){
return documents;
} else {
console.log('documents: '+ this.props.documents);
return this.props.documents;
}
},
getInitialState: function(){
return {
dataSource: [],
}
},
componentDidMount() {
this.setState({
dataSource: this.initData()
})
},
render: function(){
console.log('this.props.documents: '+ this.props.documents)
return <DataGrid
idProperty='id'
dataSource={this.initData()}
columns={columns}
style={{height: 400}}
onFilter={this.handleFilter}
liveFilter={true} //to apply the filter while typing
/>
},
handleFilter: function(column, value, allFilterValues){
//reset data to original data-array
var data = this.initData()
//go over all filters and apply them
Object.keys(allFilterValues).forEach(function(name){
var columnFilter = (allFilterValues[name] + '').toUpperCase()
if (columnFilter == ''){
return
}
data = data.filter(function(item){
if ((item[name] + '').toUpperCase().indexOf(columnFilter) === 0){
return true
}
})
})
this.initData(data)
this.setState({})
}
})
第一个控制台日志不返回任何内容
文件:
render() 中的控制台日志返回数据
this.props.documents:[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]
这就是我从我的家庭组件中调用我的数据网格组件的方式
<DocumentReactNewGrid documents={this.state.documents}/>