Question

我想在定义变量值时设置组件的 prop。以下是我当前的代码。

import Cropper from 'react-easy-crop'
...
interface State {
 ...
  coverFile: File | null;
  ...
}
class Test extends React.PureComponent<Props, State> {
  state = {
    ...
    coverFile: null,
    ...
  };
...
const file = event.target.files;
self.setState({
              coverFile: file[0],
            });

<Cropper
  image={coverFile?coverFile:undefined}
  ...
/>

这是错误信息。

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CropperProps>): Cropper', gave the following error.
    Type 'null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.
  Overload 2 of 2, '(props: CropperProps, context?: any): Cropper', gave the following error.
    Type 'null | undefined' is not assignable to type 'string | undefined'.ts(2769)

我该如何解决这个问题？

Answer 1

这解释了您的错误消息

<块引用>

输入'null | undefined' 不能分配给类型 'string |未定义'。

Cropper 的图像道具需要 string 或 undefined，但您传递的是 null 或 undefined

您是否将 coverFile 初始化为 null？如果是这样，您可以将其设置为 undefined 以消除错误

更新： 如果您无法弄清楚 null 的来源，您可以简单地执行以下操作：

<Cropper
  image={coverFile || undefined}
  ...
/>

Answer 2

首先，你不需要使用 (JSX attribute) image?: string | undefined 你可以写 image?: string 因为，通过严格的空检查，一个可选参数会自动添加 | undefined

其次，基于 react-easy-crop document 它需要 image 或 video（至少其中之一）是必需的，所以如果有一个未定义的图像，你需要传递一个有效的 video 参数我认为这会有所帮助：

 {coverFile && (
  <Cropper
   image={coverFile}
   ...
 />)
 }

用条件反应打字稿组件集道具

2 个答案: