Question

首先，我对于在我职业生涯的大部分时间里主要编码API的反应世界相对较新。我正在为一个非营利组织建立一个反应应用程序，我只是试图摆脱困境。

我添加了一个标题类，如下所示：

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'的参数不能赋值给输入'ComponentType＆lt; {displayName：string; isAuthenticated：boolean; } ＆安培; {logIn :(）=＆gt;登录;登出： ...'。输入'typeof Header'不是可分配给'StatelessComponent＆lt; {displayName：string; isAuthenticated：boolean; }＆amp; {logIn :(）=＆gt;登录;登录......“。类型'typeof Header'不提供签名匹配'（props：{displayName：string; isAuthenticated：boolean;}＆amp; {logIn：（）=＆gt; 登录; logOut :(）=＆gt;登出; }＆amp; {children？：ReactNode; ，上下文？：任何）：ReactElement |空”。

我已经和它斗争了好几个小时但现在无济于事。我相当自信这是一个菜鸟的错误;请温柔！

Answer 1

构造函数中的第二个参数不是State，它是context。

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

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

或只是

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

除非您需要某些内容。

也就是说，您已使用React.Component<Props, State>正确键入它，因为这两种类型是泛型React.Component类型的预期类型，但这两种类型不反映构造函数参数应该是什么（这是props和（可选）context）

Answer 2

错误使得看起来连接确实非常，非常期待无状态组件（尽管我不确定为什么）。你可以尝试：

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);

获取错误“类型'类型'参数'的参数'不能分配给'ComponentType ...'或'StatelesComponent'类型的参数......”

2 个答案: