reactjs - 在 electron-es6-react 中从父组件调用子组件

Question

我正在使用带有 react es-6 的电子，我需要显示固定数据表中的数据，因为我这样编写代码这里是主类代码，我正在调用 fixedTable

 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>
        )
    }
}

非常感谢任何帮助

Answer 1

您需要在构造函数中将此绑定到 getZipData。

    export default class Main extends React.Component {
            constructor(props) {
                    super(props);
                    this.state = {
                            result: [],
                    };
                    this.getZipData = this.getZipData.bind(this);
            }
            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}/>
                            }
            }
    }