Question

我使用React与typescript，我不能使用我的组件与'react-redux'连接装饰器。我有组件：

import * as React from 'react';
import { connect } from 'react-redux';
import State from '../../models/State';
import { showPopup } from '../../actions/popup.actions';

import IconButton from '../IconButton/IconButton.component';
import Page from '../Page/Page.component';
import Popup from '../Popup/Popup.component';

interface Props {
   popups: string[];
   showPopup: Function;
   hidePopup: Function;
}

class AccountsPage extends React.Component {
    props: Props;

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

    render() {
        return (
            <Page>
                <div className="page__header">
                    <IconButton icon="add" onClick={() => 1}>Добавить</IconButton>
                </div>
                <div className="page__content">
                     <button onClick={() => this.props.showPopup()}>Show popup</button>
                </div>
                {
                    this.isPopupVisible ? 
                        <Popup onClose={() => this.props.hidePopup()}>
                            <div>Hi!</div>
                        </Popup> :
                        null
                }
            </Page>
        );
    }
}

export default connect(
    (state: State) => ({
        popups: state.popups
    }),
    (dispatch: Function) => ({
        showPopup: (pageName: string) => dispatch(showPopup(pageName))
        hidePopup: (pageName: string) => dispatch(hidePopup(pageName))
    })
)(AccountsPage);

我得到一个错误：

(62,3): Argument of type 'typeof AccountsPage' is not assignable to parameter of type 'ComponentType<{ popups: string[]; } & { showPopup: (pageName: string) => any; hidePopup: (pageNam...'.
Type 'typeof AccountsPage' is not assignable to type 'StatelessComponent<{ popups: string[]; } & { showPopup: (pageName: string) => any; hidePopup: (pa...'.
Type 'typeof AccountsPage' provides no match for the signature '(props: { popups: string[]; } & { showPopup: (pageName: string) => any; hidePopup: (pageName: string) => any; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.

如果我将props: Props更改为props: any一切正常，我该如何更改Props界面以修复此错误？

Answer 1

使用TypeScript调用React.Component需要将Props指定为类型参数，如下所示：

class AccountsPage extends React.Component<Props, {}> {

}

Answer 2

这是一个完全类型化的例子：

interface DispatchProps {
    hidePopup: (pageName: string) => void;
    showPopup: (pageName: string) => void;
}

interface StateProps {
    popups: State['popups'];
}

type Props = DispatchProps & StateProps;

class AccountsPage extends React.Component<Props> {

    isPopupVisible: boolean;

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

    render() {
        return (
            <Page>
                <div className="page__header">
                    <IconButton icon="add" onClick={() => 1}>Добавить</IconButton>
                </div>
                <div className="page__content">
                    <button onClick={() => this.props.showPopup()}>Show popup</button>
                </div>
                {
                    this.isPopupVisible ?
                        <Popup onClose={() => this.props.hidePopup()}>
                            <div>Hi!</div>
                        </Popup> :
                        null
                }
            </Page>
        );
    }
}

export default connect(
    (state: State): StateProps => ({
        popups: state.popups
    }),
    (dispatch: Function): DispatchProps => ({
        showPopup: (pageName: string) => dispatch(showPopup(pageName)),
        hidePopup: (pageName: string) => dispatch(hidePopup(pageName))
    })
)(AccountsPage);

看起来isPopupVisible应该是状态变量，但我不确定，所以保持原样。您还在示例中调用了hidePopup()和showPopup()而没有pageName名称，因此在更改之前会导致错误。

我不确定您的代码中是如何定义hidePopup()和showPopup()的，但您可能会为DispatchProps设置此内容：

interface DispatchProps {
    hidePopup: typeof hidePopup;
    showPopup: typeof showPopup;
}

React：如何使用组件使用自定义Props接口与'react-redux'连接装饰器

2 个答案: