出现错误“'typeof Header' 类型的参数不可分配给 'ComponentType...' 或 'StatelesComponent' 类型的参数...”

Question

首先，我对 React 世界比较陌生，在我职业生涯的大部分时间里都编写了大量 API。我正在为非营利组织构建一个 React 应用程序，而我只是在尝试起步。

我添加了一个头类如下：

import './header.css';
import * as React from 'react';
import * as actions from '../../actions/authenticationActions';
import { AppState } from '../../state/appState';
import { connect, Dispatch } from 'react-redux';

const logo = require('./logo.svg');

interface Props {
    displayName: string;
    isAuthenticated: boolean;
    logIn?: () => void;
    logOut?: () => void;
}

interface State {

}
class Header extends React.Component<Props, State> {
    constructor(props: Props, state: State) {
        super(props, state);
    }

    render() {
        return (
            <div className={'Header'}>
                <div className={'Container'}>
                    <img src={logo} className="App-logo" alt="logo" />
                    <div className={'Header__nav'}>
                        <div className={'userLogin'}>
                            <div className={'user'}>{this.props.displayName}</div>
                            <a onClick={this.props.logOut}>Log Out</a><a onClick={this.props.logIn}>Log In</a>
                        </div>
                        {/*<a href='https://localhost/' className={'button button--goBack'}>Back to Website</a>*/}
                    </div>
                </div>
            </div>
        );
    }
}

export const mapStateToProps = ({ currentUser }: AppState) => ({
    displayName: (currentUser != null ? currentUser.preferredName : 'Please Log In'),
    isAuthenticated: currentUser != null
});

export const mapDispatchToProps = (dispatch: Dispatch<actions.AuthenticationActions>) => ({
    logIn: () => dispatch(actions.logIn()),
    logOut: () => dispatch(actions.logOut())
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

这在很大程度上似乎没问题，但由于以下错误消息而无法编译：

“typeof Header”类型的参数不能分配给参数 类型'组件类型 登录；登出： ...'。类型'typeof Header'不是 可分配给类型 'StatelessComponent 登录；日志...'。 类型 'typeof Header' 提供不匹配的签名 '(props: { displayName: string; isAuthenticated: boolean; } & { logIn: () => 登录;登出：() => 登出； } & { 孩子？：反应节点； }， 语境？： 任何）：反应元素 |空'。

我已经为此奋斗了几个小时，但无济于事。我相当有信心这是一个菜鸟错误；请温柔一点！

Answer 1

构造函数中的第二个参数不是State，而是上下文。

Header 不是有效的 React.Component 因为构造函数应该是

constructor(props: Props, context) {
    super(props, context);
}

或者只是

constructor(props: Props) {
    super(props);
}

除非您需要某些内容的上下文。

也就是说，您使用React.Component<Props, State> 正确键入了它，因为这两种类型是通用React.Component 类型所期望的，但这两种类型并不反映构造函数参数应该是什么（即@987654325 @ 和（可选）context)

Answer 2

这个错误让 connect 看起来真的非常期待一个无状态组件（尽管我不确定为什么）。你可以试试：

import './header.css';
import * as React from 'react';
import * as actions from '../../actions/authenticationActions';
import { AppState } from '../../state/appState';
import { connect, Dispatch } from 'react-redux';

const logo = require('./logo.svg');

interface Props {
  displayName: string;
  isAuthenticated: boolean;
  logIn?: () => void;
  logOut?: () => void;
}

const Header = (props: Props) => (
  <div className={'Header'}>
    <div className={'Container'}>
      <img src={logo} className="App-logo" alt="logo"/>
      <div className={'Header__nav'}>
        <div className={'userLogin'}>
          <div className={'user'}>{props.displayName}</div>
          <a onClick={props.logOut}>Log Out</a><a onClick={props.logIn}>Log In</a>
        </div>
        {/*<a href='https://localhost/' className={'button button--goBack'}>Back to Website</a>*/}
      </div>
    </div>
  </div>
);

export const mapStateToProps = ({currentUser}: AppState) => ({
  displayName: (currentUser != null ? currentUser.preferredName : 'Please Log In'),
  isAuthenticated: currentUser != null
});

export const mapDispatchToProps = (dispatch: Dispatch<actions.AuthenticationActions>) => ({
  logIn: () => dispatch(actions.logIn()),
  logOut: () => dispatch(actions.logOut())
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);