2

ドキュメント テーブルを表すために 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:[object オブジェクト]、[object オブジェクト]、[object オブジェクト]、[object オブジェクト]、[object オブジェクト]

これが、ホームコンポーネントからデータグリッドコンポーネントを呼び出す方法です

<DocumentReactNewGrid documents={this.state.documents}/>
4

1 に答える 1