reactjs - InferableComponentEnhancerWithProps 类型缺少 Component 类型中的以下属性

Question

我正在关注 this在 Typescript 上使用 React 和 Redux 构建聊天应用程序的教程，但在导出连接的组件时出现错误:

Type 'InferableComponentEnhancerWithProps<ConnectedState & ConnectedDispatch, OwnProps>' 
is missing the following properties from type 'Component<OwnProps, {}, any>': 
context, setState, forceUpdate, render, and 3 more.

这是教程中的代码。在什么意义上我应该更新它以摆脱这个错误并能够正常使用组件。

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

import { Message as MessageModel, UserMessage} from 'rcserver/src/models'
import { ChatState } from '../state'
import { Action } from '../actions'

import { Messages } from './Messages'
import { ChatInput } from './ChatInput'


interface OwnProps {
  socket: WebSocket,
  username: string
}

interface ConnectedState {
  messages: MessageModel[]
}

interface ConnectedDispatch {}
interface OwnProps {}


const mapStateToProps = (state: ChatState, ownProps: OwnProps): ConnectedState => ({
  messages: state.messages
})

const mapDispatchToProps = (dispatch: redux.Dispatch<Action>): ConnectedDispatch => ({})

export class ChatAppComponent extends React.Component<ConnectedState & ConnectedDispatch & OwnProps> {

  sendHandler = (message: string) => {
    const messageObject: MessageModel = {
      name: this.props.username,
      message: message
    }
    this.props.socket.send(JSON.stringify(messageObject))
  }

  render() {
    return (
      <div className="container">
        <h3>React Chat App</h3>
        <Messages username={this.props.username} messages={this.props.messages} />
        <ChatInput onSend={this.sendHandler} />
      </div>
    )
  }

}
 
export const ChatApp: React.Component<OwnProps> = connect(mapStateToProps, mapDispatchToProps)
//This last line is the one triggering the error

Answer 1

几乎正确，但你忘记申请connect(mapStateToProps, mapDispatchToProps)给您的 ChatAppComponent .这应该有效:

export const ChatApp = connect(mapStateToProps, mapDispatchToProps)(ChatAppComponent)

ChatApp的类型将被正确推断，因此您不需要类型签名。如果您确实需要签名，则需要 React.FunctionComponent<OwnProps>但是，因为连接的组件不是一个类。或者，您也可以使用更通用的 React.ComponentType<OwnProps>它适用于类和函数组件。