1

私はreact es-6でelectronを使用しています。固定データテーブルのデータを表示する必要があります。そのために、このようにコードを書きました。ここからのメインクラスコードです。固定テーブルを呼び出しています

 export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            result: [],
        };
    }
    getZipData() {
        //here iam getting data and set the data to state
    }
    componentDidMount() {
        var data = this.getZipData();
    };
    render() {
        alert("render");
        if(this.state.result.length==0) {
            return (
                <div className="row-fluid">
                    <img className="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"
                         src="http://www.preciseleads.com/images/loading_animation.gif"/>
                </div>
            )
        }else{
            alert(this.state.result.length);
            <fixedTable result={this.state.result}/>
            }
    }
}

子クラス:ここでは、このクラスのコンストラクター(小道具)で固定データテーブルを使用しています。親クラスで取得している結果データに結果を設定する必要があります

    class fixedTable extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            result:props.result //i need to use parent data result here
            filteredRows: null,
            filterBy: null,
        }
    }
    componentWillMount(){
        alert("willmount");
        this._filterRowsBy(this.state.filterBy);
    }
    _rowGetter(rowIndex){
        return this.state.filterRows[rowIndex];
    }
    _filterRowsBy(filterBy){
        var result = this.state.result.slice();
        var filteredRows = filterBy ? rows.filter(function(row){
            return result.ClinicId.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
        }): result;
        this.setState({
            filteredRows,
            filterBy,
        });
    }
    _onFilterChange(e){
        this._filterRowsBy(e.target.value);
    }
    render(){
        return(
            <div>
                <label>filter by <input onChange={this._onFilterChange} /></label>
                <Table
                    height={200}
                    rowHeight={30}
                    rowGetter={this._rowGetter}
                    rowsCount={this.state.filteredRows.length}
                    width={450}
                    maxHeight={450}
                    headerHeight={40}>
                    <Column
                        label="RecNo"
                        width={270}
                        dataKey="Recno"
                        />
                    <column
                        label="Clinic Name"
                        width = {300}
                        dataKey="ClinicName"
                        />
                    <column
                        label="Connection String"
                        width = {100}
                        dataKey="ConnectionString"
                        />
                    <column
                        label="ClinicId"
                        width = {100}
                        dataKey="ClinicId"
                        />
                </Table>
            </div>
        )
    }
}

どんな助けでも大歓迎です

4

1 に答える 1