将调度操作导入 React 组件辅助

Question

我在导入调度操作时遇到问题。编译器抱怨：

Type 'Readonly & Readonly' 没有属性 'onShowError' 也没有字符串索引签名。

const { onShowError, error, errorMessage } = this.props 这是导致问题的代码。

我知道我的导入以及 React 如何扩展组件等有问题，但我找不到解决方案。我是 TypeScript 的新手，更不用说 JavaScript。我只是无法弄清楚哪里出了问题。

我尝试创建自己的接口 CustomProps 并声明 onShowError 是一个函数但不起作用。 Not Assignable to {}

import * as React from "react"
import { Dispatch, Action } from "redux"
import { connect } from "react-redux"
import { AppState } from "reducers"

import { showError } from "data/error_handler"

import Snackbar from "material-ui/Snackbar"
import RaisedButton from "material-ui/RaisedButton"

class ErrorHandler extends React.Component {
  hideErrorPopup = () => {
    this.setState({
      error: false,
    })
  }

  public render() {
    const { onShowError, error, errorMessage } = this.props

    return (
      <div>
        <RaisedButton
          onClick={onShowError}
          label="Toggle ErrorHandler"
        />
        <Snackbar
          bodyStyle={{ backgroundColor: "#ffa000", marginBottom: "5px" }}
          open={error}
          message={errorMessage}
          autoHideDuration={5000}
          onRequestClose={this.hideErrorPopup}
        />
      </div>
    )
  }
}

const mapStateToProps = (state: AppState) => ({
  errorMsg: state.errorRedux.errorMessage,
  error: state.errorRedux.error,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
  return {
    onShowError: () => dispatch(showError()),
  }
}

export default connect<any>(
  mapStateToProps,
  mapDispatchToProps
)(ErrorHandler)

Reducer.ts

import { ErrorHandlerProps, ActionTypes } from "./"

const initialState: ErrorHandlerProps = {
  error: false,
  errorMessage: "",
}

export default (
  state: ErrorHandlerProps = initialState,
  action: ActionTypes
) => {
  switch (action.type) {
    case "SHOW_ERROR":
      return {
        ...state,
      }
  }
}

Interface.ts & index.ts

export interface ErrorHandlerProps {
  error: boolean
  errorMessage: string
}
import reducer from "./reducer"
export { reducer }
export * from "./actions"
export * from "./interfaces"

actions.ts

export type ActionTypes = {
  type: "SHOW_ERROR"
  error: boolean
  errorMessage: string
}

export const showError = (): ActionTypes => ({
  type: "SHOW_ERROR",
  error: true,
  errorMessage: "[ACTIONS]",
})

Answer 1

您可能希望明确指定组件的形状：

class myClass extends React.Component<PropShape, StateShape>

要让 props 正常工作，请提供你的 props 类型（包括你的组件的实际 props，以及 connect:mapStateToProps 和 mapDispatchToProps 注入的 props）。在这种情况下，您只需要注入的道具：

class ErrorHandler extends React.Component<
    ReturnType<typeof mapStateToProps> 
    & ReturnType<typeof mapDispatchToProps>
> {

    ...
}

const mapStateToProps = (state: AppState) => ({
  errorMsg: state.errorRedux.errorMessage,
  error: state.errorRedux.error,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
  return {
    onShowError: () => dispatch(showError()),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ErrorHandler)

如果您真的打算保留一个单独的本地组件状态，您可能还想包含状态的形状，尽管我不确定您的最终意图是什么：

class ErrorHandler extends React.Component<
    ReturnType<typeof mapStateToProps> 
    & ReturnType<typeof mapDispatchToProps>,
    IState> {
    ...
}

interface IState {
    error: boolean;
}

有关将 React 与 TypeScript 结合使用的一些常见用例，请参阅 https://github.com/sw-yx/react-typescript-cheatsheet。

Answer 2

如果您只是想快速解决 ts 的投诉，as any 技巧就可以了：

const { onShowError, error, errorMessage } = this.props as any

要正确解决这个问题，您需要将 CustomProps 传递给您的组件：

interface CustomProps {
  onShowError: Function;
  error: boolean;
  errorMessage: string;
}

class ErrorHandler extends React.Component<CustomProps> {
  hideErrorPopup = () => {
    this.setState({

// ...