JSX 元素类不支持属性，因为它没有“props”属性。ts(2607)

Question

当我使用react-easy-crop库中的“Cropper”时出现此错误，我尝试了在论坛上找到的一些方法，例如添加@types/react、从“react”导入*作为React，但似乎没有任何效果工作。

这是给我带来麻烦的代码：

import * as React from "react";
import Cropper from "react-easy-crop";

export default function CropperPage({action , valuePro}: any) {
   return (
     <Cropper //  <-- This is giving me the error
        cropShape= "round"
        disableAutomaticStylesInjection="true"
        image={image}
        crop={crop}
        zoom={zoom}
        aspect={1}
        onCropChange={setCrop}
        onZoomChange={setZoom}
        onCropComplete={onCropComplete}
    />
   );
}

整个错误信息是：

Blockquote JSX 元素类不支持属性，因为它没有“props”属性。ts(2607)“Cropper”不能用作 JSX 组件。其实例类型“Cropper”不是有效的 JSX 元素。类型“Cropper”缺少类型“ElementClass”中的以下属性：context、setState、forceUpdate、props、refsts(2786)（别名）class Cropper import Cropper

Answer 1

我遇到了同样的错误<Text></Text>，这是因为我没有导入该组件。

Answer 2

所以我最近实际上遇到了这个问题，在未能在这里找到答案后，能够使用 typescript 的traceResolution功能来发现：typescript 正在解析import "react"为node_modules/react/index.js而不是node_modules/@types/react/index.d.ts. 对我的 tsconfig.json 进行一些更改能够解决此问题 - 我node_modules/*在一场paths比赛中遇到了这个问题，并且必须添加node_modules/@types/*以使其查找@types/包。

因此，我建议使用traceResolution（作为 tsc 标志或 tsconfig.json 字段）并查看 React 是否解析错误，如果是这种情况，请重点修复该问题；尽管traceResolution输出对此有明确的最终结论，但找到node_modules/react而不是node_modules/@types/react可能是同样的问题。