使用react redux connect函数时渲染组件上的Typescript错误

Question

我有一个组件类，我正在使用react-redux将redux存储连接到该组件类，但是当我尝试将该组件传递到connect函数时，出现了一个错误。

class FileItem extends Component<IFileItemProps, undefined> {
}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps => {
};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {
};

// This FileItem component passed into the below parameter is where I am getting the error

export default connect<IFileItemReduxProps, IFileItemDispatchProps, IFilePassedProps, IFileItemReduxState>(mapStateToProps, mapDispatchToProps)(FileItem);

以下是我正在使用的每个接口（redux发出的调度除外）：

export interface IFileItemProps {
    file: FileDirectoryNode;
    fileExplorerInfo: FileExplorerReducerState;
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

export interface IFilePassedProps {
    file: FileDirectoryNode;
}

export interface IFileItemReduxState {
    fileExplorer: FileDirectoryTree;
}

export interface IFileItemReduxProps {
    fileExplorerInfo: FileDirectoryTree;
}

export interface IFileItemDispatchProps {
    selectFile: (file: FileDirectoryNode) => void;
    openFile: (file: FileDirectoryNode) => void;
}

IFileItemProps：组件将使用的所有类型

IFilePassedProps：这些是从父组件传递到组件的道具，所以我没有看到呈现的组件元素的键入问题。

IFileItemReduxState：从react redux传递到MapStateTrops的状态。

IFileItemReduxProps：从react-redux的mapStateToProps返回的道具。

IFileItemDispatchProps：从react redux的mapDispatchToProps返回的道具。

据我所知，connect函数的类型如下：

connect<TReturnedMapStateToProps = {}, TReturnedMapDispatchToProps = {}, TPassedFromOutsideProps= {}, TReduxState = {}>

但当我这样做时，我得到如下错误：

Answer 1

乍一看，我发现IFileItemProps和IFileItemReduxProps接口中的属性“fileExplorerInfo”的类型不同。

你是说FileDirectoryTree还是FileExplorerReducerState？

话虽如此，我遇到了一个类似的问题，我的组件的签名不匹配。幸运的是，我没有直通道具，所以我把它修好了

class FileItem extends Component<IFileItemProps &
                                 IFileItemReduxProps & 
                                 IFileItemDispatchProps, undefined> {}

const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps =>{};

const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {};

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

希望这有助于：）