Typescript error on rendered component when using react
I have a component class that I am using react-redux to connect the redux store to, but I am getting an error when I try to pass the component into the connect function.
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);
These are each of the interfaces that I am using (except for Dispatch being from 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: All the types that the component will utilize
IFilePassedProps: These are the props passed into the component from the parent, so I dont see typing issues on the rendered component element.
IFileItemReduxState: The state passed to mapStateToProps from react-redux.
IFileItemReduxProps : The props returned from mapStateToProps from react-redux.
IFileItemDispatchProps : The props that are returned from mapDispatchToProps from react-redux.
From what I understand the connect function is typed like so:
connect<TReturnedMapStateToProps = {}, TReturnedMapDispatchToProps = {}, TPassedFromOutsideProps= {}, TReduxState = {}>
But when I do that, I am getting the following error like so:
At first glance, I found that the type of the property 'fileExplorerInfo' is different in your IFileItemProps and IFileItemReduxProps interfaces.
Did you mean the type to say FileDirectoryTree or FileExplorerReducerState?
That being said, I ran into a similar issue where my component's signature was not matching. Luckily for me I had no pass-through props so I fixed it like this
class FileItem extends Component<IFileItemProps &
IFileItemReduxProps &
IFileItemDispatchProps, undefined> {}
const mapStateToProps = (state: IFileItemReduxState): IFileItemReduxProps =>{};
const mapDispatchToProps = (dispatch: Dispatch): IFileItemDispatchProps => {};
export default connect(mapStateToProps, mapDispatchToProps)(FileItem);
Hope this helps :)
链接地址: http://www.djcxy.com/p/52170.html