Ant-design-pro

https://github.com/ant-design/ant-design-pro/

https://pro.ant.design/docs/getting-started-cn

使用

$ git clone https://github.com/ant-design/ant-design-pro.git --depth=1
$ cd ant-design-pro
$ npm install
$ npm start         # visit http://localhost:8000

Or you can use the command tool: ant-design-pro-cli

$ npm install ant-design-pro-cli -g
$ mkdir pro-demo && cd pro-demo
$ pro new

不使用model

export default class BasicProfile extends Component {
  state = {
    temp: ''
  }

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'profile/fetchBasic',
    });
    this.test();
  }

  async test() {
    let temp = await queryBasicProfile();
    this.setState({temp: temp})
  }
......

常用代码

dispatch

class Dashboard extends PureComponent {
  componentDidMount() {

    const { dispatch } = this.props;
    dispatch({
      type: 'profile/fetchAdvanced',
    });


    this.props.dispatch({
      type: 'user/fetch',
    });
  }
  render() {
    const { user: { list, loading } } = this.props;
......
}

export default connect(state => ({
  user: state.user,
}))(Dashboard);

@connect

@connect(state => ({
  profile: state.profile,
}))
export default class BasicProfile extends Component {
......
  render() {
    const {profile} = this.props;
......

@Bind @Debounce

  @Bind()
  @Debounce(200)
  setStepDirection() {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }


  componentDidMount() {
    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
    this.setStepDirection.cancel();
  }

object[key]

    const contentList = {
      tab1: <Table
        pagination={false}
        loading={advancedLoading}
        dataSource={advancedOperation1}
        columns={columns}
      />,
      tab2: <Table
        pagination={false}
        loading={advancedLoading}
        dataSource={advancedOperation2}
        columns={columns}
      />,
      tab3: <Table
        pagination={false}
        loading={advancedLoading}
        dataSource={advancedOperation3}
        columns={columns}
      />,
    };
{contentList[this.state.operationkey]}