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

Question

现在，我将isLoading放到any中，但是如果我将它放入boolean (正如我所希望的那样)，它在“加载”const上徘徊时会抛出以下错误。据我所知，这应该是可行的。打字稿很新，所以请温柔点。任何帮助都将不胜感激。

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)

index.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

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