Question

我正在用ReactJS构建一个应用程序，并创建了一个名为ListBaseComponent的基类用于分页。我的另一个类是从该类派生的，但是我不能使用this.state.SomeState调用基本状态。我该怎么办？

export class ListBaseComponent extends Component {
  state = {
    filter: {
      paging: {
        pageSize: 10,
        currentPage: 1,
        rowsCount: 0
      }
    }
  };
export class CountryList extends ListBaseComponent {
  ...
  total={this.state.filter.paging.rowsCount} //TypeError: Cannot read property 'paging' of undefined
}

Answer 1

您会将它们作为道具传递

import CountryList from './path/to/country/list/component';

export class BaseComponent extends Component {
  state = {
    filter: {
      paging: {
        pageSize: 10,
        currentPage: 1,
        rowsCount: 0
      }
    }

   render() {
       return(
           <div className="wrapper">
                <CountryList
                    filter={this.state.filter}
                />
           </div>
       )
   }
};

然后可以在CountryList内致电

export class CountryList extends Component {
  ...
  total={this.props.filter ? this.props.filter.paging.rowsCount : null}
}

Answer 2

您始终可以通过子类访问父级属性，可能是您忘记了在子类FOR /F "USEBACKQ TOKENS=*" %%F IN ("%FileList%") DO XCOPY /F /Y "%Source%\%%~F" "%Destination%\" for /f %%a in ('findstr /s /m /i "%search%" "%Source%"') do echo %%a & xcopy /y "%%a" "C:\Users\davidz\Desktop\Folder"中调用super()。

还要确保使用constructor初始化父状态，以便子实例可以访问此属性。

this.state

import React from "react";

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      filter: {
        page: 1
      }
    };
  }
  render() {
    return (
      <div>
        I am a parent component .<ChildApp />
      </div>
    );
  }
}

class Child extends Parent {
  constructor() {
    super();
  }

  render() {
    return <h1> I am a child component {this.state.filter.page} </h1>;
  }
}

如何在ReactJS的基类中调用状态？

2 个答案: