Question

我正在尝试弄清楚在使用打字稿时如何将道具传递给组件。

如果我尝试在任何地方传递任何支柱，无论是本地状态还是除{...this.props}以外的任何支柱，我收到的错误。但如果我传下来的话，我就不会在另一端得到任何我想要的东西。相反，我得到历史，位置，匹配适用的默认值和staticContext：undefined。如果我尝试传递动作，如下面的示例所示，那么它将是未定义的。

我得到的错误是

client:157 [at-loader] ./src/containers/App/index.tsx:25:31 TS2339: Property 'actions' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Home> & Readonly<{ children?: ReactNode; }> & Read...'.

我的App.tsx如下：

import * as React from 'react';
import * as HomeActions from '../../actions/home';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';
import Home from '../../components/Home';

export namespace App {
  export interface Props extends RouteComponentProps<void> {
    actions: typeof HomeActions
  }

  export interface State {
    /* empty */
  }
}

export class App extends React.Component<App.Props, App.State> {

  render() {
    return (
      <div>
        <Home {...this.props} actions={this.props.actions}/>
        {this.props.children}
      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    home: state.home
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(HomeActions as any, dispatch)
  };
}

connect(mapStateToProps, mapDispatchToProps);

在home组件中，当我在onComponentDidMount(){}中记录this.props.actions时，我得到了未定义。

Answer 1

您应该将组件传递给connect并导出已连接的组件，而不仅仅是组件。

export connect(mapStateToProps, mapDispatchToProps)(App);

如何在react-redux-typescript

1 个答案: