Javascript redux连接到组件typescript DispatchProps<；任何>；错误_Javascript_Reactjs_Typescript_React Redux

Javascript redux连接到组件typescript DispatchProps<；任何>；错误

javascript reactjs typescript

Javascript redux连接到组件typescript DispatchProps<；任何>；错误,javascript,reactjs,typescript,react-redux,Javascript,Reactjs,Typescript,React Redux,我在TS 2.4.2和2.5、React 15.6和16.0中遇到了这个问题，所以我认为这不是版本问题。我的另一个项目没有这个问题，但这是一个新项目，我无法解决这个问题。最大的区别是我使用的是最新（20171027）版本的不仅仅是这个ListMessages文件，我还在其他文件中测试了它。任何我尝试使用connect（mapStateToProps）（组件）的地方，但我得到了类型为“ComponentType”的参数的错误代码 import * as React from 'react'

我在TS 2.4.2和2.5、React 15.6和16.0中遇到了这个问题，所以我认为这不是版本问题。我的另一个项目没有这个问题，但这是一个新项目，我无法解决这个问题。最大的区别是我使用的是最新（20171027）版本的

不仅仅是这个ListMessages文件，我还在其他文件中测试了它。任何我尝试使用connect（mapStateToProps）（组件）的地方，但我得到了类型为“ComponentType”的参数的错误

代码

import * as React from 'react'
import { connect } from 'react-redux'

import { IChatMessage } from '../Chat'
// export interface IChatMessage {
//  creatorId: string,
//  groupId: string,
//  value: string,
// }

import Message from '../ChatMessage'

import './ChatGroupMessages.css'

interface IProps {
  dispatch?: (action: any) => void, // tslint:disable-line no-any
  messages?: IChatMessage[],
}

interface IState {}

class ListMessages extends React.Component<IProps, IState> {
  static defaultProps = {
    messages: [
      {creatorId: 1, groupId: 0, value: 'Waazz up'}
    ]
  }

  list: any = null // tslint:disable-line no-any

  componentDidUpdate() {
    this.list.scrollTop = this.list.scrollHeight
  }

  render() {
    const {messages} = this.props

    return (
      <div className="chat_group_messages--container">
        <div className="chat_group_messages--list" ref={list => this.list = list}>
          {messages && messages.map((m, i) => <Message record={m} key={i} />)}
        </div>
      </div>
    )
  }
}

const mapStoreToProps = store => {
  const {messages} = store || {messages: {records: []}}

  return {messages: messages.records}
}

const ConnectedListMessages = connect(mapStoreToProps)(ListMessages)

export default ConnectedListMessages

套餐

  "dependencies": {
    "autoprefixer": "7.1.2",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.4",
    "dotenv": "4.0.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "fs-extra": "3.0.1",
    "history": "^4.7.2",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "kea": "0.22.1",
    "material-ui": "^0.18.7",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.6",
    "promise": "8.0.1",
    "react": "^15.6.2",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.2",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "source-map-loader": "^0.2.1",
    "style-loader": "0.18.2",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.5.9",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    "whatwg-fetch": "2.0.3"
  },
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/jest": "^21.1.5",
    "@types/material-ui": "^0.18.3",
    "@types/node": "^8.0.47",
    "@types/react": "^16.0.18",
    "@types/react-dom": "^16.0.2",
    "@types/react-redux": "^5.0.12",
    "@types/react-router-dom": "^4.2.0",
    "@types/react-router-redux": "^5.0.9",
    "@types/react-tap-event-plugin": "0.0.30",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "nps": "^5.7.1",
    "nps-utils": "^1.5.0",
    "ts-jest": "^20.0.7",
    "ts-loader": "^2.3.7",
    "tslint": "^5.7.0",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.2.0",
    "typescript": "^2.4.2"
  },

根据@types/react redux，您需要提供

StateProps/DispatchProps/OwnProps/MergedProps

。

这就是我在应用程序中解决Similar问题的方法。希望这有帮助

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import CloudIcon from 'material-ui/svg-icons/file/cloud';
import Paper from 'material-ui/Paper';
import { CoreStatusAction, coreStatus } from '../actions/coreStatus';

interface StatusProps {
  status: any,
  getStatus: () => void,
}

const STYLES = {
  ICON: {
    height: '200px',
    width: '200px',
  },
  PAPER: {
    margin: 'auto',
    width: 'max-content',
    padding: '50px',
  },
};

class Status extends React.Component<StatusProps> {
  constructor(props?: StatusProps) {
    super(props);
  }

  render() {
    return (
      <Paper style={STYLES.PAPER}>
        <CloudIcon style={STYLES.ICON}/>
      </Paper>
    );
  }

  componentWillMount() {
    this.props.getStatus();
  }
}

const mapStateToProps = (state: any) => ({
  status: state.status,
});

const mapDispathToProps = (dispatch: Dispatch<CoreStatusAction>) => ({
  getStatus: () => dispatch(coreStatus()),
});

export default connect<{ status: any }, { getStatus: () => void }>(
  mapStateToProps,
  mapDispathToProps,
)(Status);

import*as React from'React'；
从'react redux'导入{connect}；
从'redux'导入{Dispatch}；
从“材质ui/svg图标/文件/云”导入CloudIcon；
从“物料界面/纸张”导入纸张；
从“../actions/coreStatus”导入{CoreStatusAction，coreStatus}；
界面状态道具{
状态：任何，
getStatus:（）=>void，
}
常量样式={
图标：{
高度：“200px”，
宽度：“200px”，
},
论文：{
页边空白：“自动”，
宽度：“最大内容”，
填充：“50px”，
},
};
类状态扩展了React.Component{
构造器（道具？：状态道具）{
超级（道具）；
}
render（）{
返回(
);
}
组件willmount（）{
this.props.getStatus（）；
}
}
常量mapStateToProps=（状态：任意）=>({
状态：state.status，
});
常量mapDispathToProps=（调度：调度）=>({
getStatus:（）=>dispatch（coreStatus（）），
});
导出默认连接无效}>(
MapStateTops，
mapDispathToProps，
)（地位）；

您可以附加IChatMessage吗？@Slawaremkin addedd当您只需要映射StateToprops，而不需要映射DispatchToprops时，您该怎么做？（感谢回复btw）

导出默认连接（

MapStateTrops，

）（状态）然后连接看起来像这样。一切都在类型定义C:。如果仅提供MapStateTops，则将使用精确键入。
  "dependencies": {
    "autoprefixer": "7.1.2",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "css-loader": "0.28.4",
    "dotenv": "4.0.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "fs-extra": "3.0.1",
    "history": "^4.7.2",
    "html-webpack-plugin": "2.29.0",
    "jest": "20.0.4",
    "kea": "0.22.1",
    "material-ui": "^0.18.7",
    "object-assign": "4.1.1",
    "postcss-flexbugs-fixes": "3.2.0",
    "postcss-loader": "2.0.6",
    "promise": "8.0.1",
    "react": "^15.6.2",
    "react-dev-utils": "^4.0.1",
    "react-dom": "^15.6.2",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "5.0.0-alpha.6",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1",
    "source-map-loader": "^0.2.1",
    "style-loader": "0.18.2",
    "sw-precache-webpack-plugin": "0.11.4",
    "url-loader": "0.5.9",
    "webpack": "3.5.1",
    "webpack-dev-server": "2.7.1",
    "webpack-manifest-plugin": "1.2.1",
    "whatwg-fetch": "2.0.3"
  },
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/jest": "^21.1.5",
    "@types/material-ui": "^0.18.3",
    "@types/node": "^8.0.47",
    "@types/react": "^16.0.18",
    "@types/react-dom": "^16.0.2",
    "@types/react-redux": "^5.0.12",
    "@types/react-router-dom": "^4.2.0",
    "@types/react-router-redux": "^5.0.9",
    "@types/react-tap-event-plugin": "0.0.30",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "nps": "^5.7.1",
    "nps-utils": "^1.5.0",
    "ts-jest": "^20.0.7",
    "ts-loader": "^2.3.7",
    "tslint": "^5.7.0",
    "tslint-loader": "^3.5.3",
    "tslint-react": "^3.2.0",
    "typescript": "^2.4.2"
  },

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import CloudIcon from 'material-ui/svg-icons/file/cloud';
import Paper from 'material-ui/Paper';
import { CoreStatusAction, coreStatus } from '../actions/coreStatus';

interface StatusProps {
  status: any,
  getStatus: () => void,
}

const STYLES = {
  ICON: {
    height: '200px',
    width: '200px',
  },
  PAPER: {
    margin: 'auto',
    width: 'max-content',
    padding: '50px',
  },
};

class Status extends React.Component<StatusProps> {
  constructor(props?: StatusProps) {
    super(props);
  }

  render() {
    return (
      <Paper style={STYLES.PAPER}>
        <CloudIcon style={STYLES.ICON}/>
      </Paper>
    );
  }

  componentWillMount() {
    this.props.getStatus();
  }
}

const mapStateToProps = (state: any) => ({
  status: state.status,
});

const mapDispathToProps = (dispatch: Dispatch<CoreStatusAction>) => ({
  getStatus: () => dispatch(coreStatus()),
});

export default connect<{ status: any }, { getStatus: () => void }>(
  mapStateToProps,
  mapDispathToProps,
)(Status);