我正在使用带有Typescript的React / Redux开发一个应用程序,而使用React的Typescript相对较新。我有一个类型为React.SFC
的功能组件,并且由于我使用的是Redux,所以我要使用connect HOC将该组件与mapStateToProps and mapDispatchToProps
连接起来。但是似乎在传递道具或定义组件的方式上存在一些问题。
我遇到以下错误:
Argument of type 'SFC<AppProps>' is not assignable to parameter of type 'ComponentType
该组件可用的道具如下:
fetchUsers: typeof fetchUsers;
users: User[];
isLoading: boolean;
下面是Users.tsx的代码-
import React from 'react';
import { connect } from 'react-redux';
import Loader from '../Loader/Loader';
import './Users.css';
import { fetchUsers } from '../../Store/Users/actions';
import { AppState } from '../../index';
import { User } from '../../Store/Users/types';
interface AppProps {
fetchUsers: typeof fetchUsers;
users: User[];
isLoading: boolean;
}
const Users: React.SFC<AppProps> = (props) => {
const { isLoading } = props;
const showLoader = () => {
fetchUsers();
};
React.useEffect(() => showLoader(), []);
return (
<div className="users">
{isLoading ? <Loader /> : <div>All users</div>}
</div>
);
};
const mapStateToProps = (state: AppState) => ({
users: state.users,
isLoading: state.isLoading,
});
export default connect(
mapStateToProps, { fetchUsers },
)(Users);
代码屏幕截图:
错误屏幕截图:
此错误的原因可能是什么?