Typescript:TS编译器不接受使用布尔类型

Question

现在，我把isLoading放到any，但如果我把它放到boolean(就像我希望的那样(，当鼠标悬停在"加载"；常量。据我所知，这应该是可行的。打字很新，所以请温柔一点。如有任何帮助，我们将不胜感激。

package.json

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"typescript": "^4.0.3"

错误消息

Type '{ ({ isLoading, size, color, }: LoadingProps): false | JSX.Element; defaultProps: Partial<LoadingProps> | undefined; }' is not assignable to type 'FC<LoadingProps>'.
Type 'false | Element' is not assignable to type 'ReactElement<any, any> | null'.
Type 'false' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

索引.tsx

import React from 'react';
import ClipLoader from 'react-spinners/ClipLoader';
interface LoadingProps {
isLoading: any;
size?: number;
color?: string;
}
/**
* Loading icon to let user know a promise is going on
*
* @param isLoading Passing true to show spinner, and pass false to remove it
* @param size react-spinner parameter for size of icon
* @param color Color of Loading icon
*/
const Loading: React.FC<LoadingProps> = ({
isLoading,
size = 35,
color = '#F6F7FB',
}: LoadingProps) => {
return isLoading && <ClipLoader size={size} color={color} />;
};
Loading.defaultProps = {
size: 35,
color: '#F6F7FB',
};
export default Loading;

Answer 1

当isLoading是false时，返回语句返回false，而不是ReactElement。

我建议始终使用三进制来进行条件渲染。类似：

return isLoading ? <ClipLoader size={size} color={color} /> : null

有关详细信息，请参见文档中的条件渲染。