报错截图
在这里插入图片描述
代码
src/Child.tsx

type ChildProp = {
    count?: number
}

const Child: React.FC<ChildProp>= ({ count }) => {

    return <h3>{count}</h3>
}

export default Child;

原因是eslint使用"plugin:react/recommended"react检查时,会使用prop-types规则进行检查,在项目使用的是ts我们不会去引入prop-types声明数据类型,所以会报错这里有两种处理方法

方法一

组件props都做类型声明

type ChildProp = {
    count?: number
}

const Child: React.FC<ChildProp>= ({ count }: ChildProp) => {

    return <h3>{count}</h3>
}

export default Child;

方法二
这是一劳永逸的做法。在eslint中,会默认使用react/prop-types检查我们把它关掉就好了。
.eslintrc.js

"overrides": [
    {
        files: ["**/*.tsx"],
        // react默认使用prop-types检查类型
        // 如果使用typescript,就把这个关掉,
        // 不然会报一些没有意义的错误
        rules: {
            "react/prop-types": "off"
        }
    }
]

原文地址:https://blog.csdn.net/tuzi007a/article/details/129867139

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_17523.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注