道具验证中反应回纹误差的丢失

小开

如果希望在类声明中使用静态 getter，则需要将 propTypes定义为:

static get propTypes() {
return {
children: PropTypes.any,
onClickOut: PropTypes.func
};
}

如果你想把它定义成一个对象，你需要在类之外定义它，像这样:

IxClickOut.propTypes = {
children: PropTypes.any,
onClickOut: PropTypes.func,
};

如果你从 prop-types，没有，react中导入道具类型，这样会更好，否则你会在控制台中看到警告(作为反应16的准备) :

import PropTypes from 'prop-types';

小开

看来问题出在 eslint-plugin-react上。

如果您通过解构类中的任何位置对命名对象进行了注释，那么它就无法正确地检测到 propTypes中提到的道具。

过去有类似的问题

小开

最佳答案

问题出现在 handleClick 中的流注释中，我删除了这个并且工作正常谢谢@alik

小开

过去几天我遇到了这个问题。正如 Omri Aharon 在他们上面的回答中所说，为你的道具类型添加类似于下面这样的定义是很重要的:

SomeClass.propTypes = {
someProp: PropTypes.number,
onTap: PropTypes.func,
};

不要忘记在类之外添加道具定义。我会把它放在我班级的正下方/正上方。如果您不确定 PropType 的变量类型或后缀是什么(例如: PropTypes.number) ，请参考此 Npm 引用。若要使用 PropType，必须导入包:

import PropTypes from 'prop-types';

如果你得到的衬里错误: someProp is not required, but has no corresponding defaultProps declaration所有你要做的就是添加 .isRequired到你的道具定义的结尾，像这样:

SomeClass.propTypes = {
someProp: PropTypes.number.isRequired,
onTap: PropTypes.func.isRequired,
};

或者像下面这样添加默认的道具值:

SomeClass.defaultProps = {
someProp: 1
};

如果您像我一样，没有经验或不熟悉 reactjs，您也可能会得到这个错误: Must use destructuring props assignment。要修复此错误，请在使用道具之前定义它们。例如:

const { someProp } = this.props;

小开

问题: 在道具验证、 eslintreact/道具类型中缺少“ id1”

<div id={props.id1} >
...
</div>

下面的解决方案在一个函数组件中起作用:

let { id1 } = props;


<div id={id1} >
...
</div>

希望能帮上忙。

小开

我知道这个答案很荒谬，但是可以考虑禁用这个规则，直到问题解决或者升级了工具:

/* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling

或者在 eslintrc 中禁用项目范围:

"rules": {
"react/prop-types": "off"
}

小开

对我来说，将 埃林特-插件-反应升级到最新版本7.21.5就解决了这个问题

小开

功能性反应组件。定义为对象。我得到这个错误，因为我复制和粘贴的对象从一个不同的稍微不同的名称，并忘记更改名称的原型对象。

FooterIcons.propTypes = {} -> FooterIcon.propTypes

小开

PropType 检查是一件好事，建议不要被设置忽略

您可以通过使用 vscode React PropTypes 自动生成 propTypes 生成扩展:

选择组件的名称
按下命令 + 。(Windows 是 Ctrl + 。)在 macOS 中显示 Code Actions 并选择 PropTypeesGenerate，或者按 Shift + command + alt + P (Windows 是 shift + ctrl + alt + P)
输入 proType 以替换默认类型

小开

我发现 eslint 对我自己正在做的项目过于严格，但是对于这个错误，我通过定义我的接口，然后按照这样的方式实现来修正它:

interface myInterface: {
test: string
}


const MyComponent: React.FC<myInterface> = (props: myInterface) => {

小开

用 -npm i prop-types --save安装螺旋桨型软件包进口它-

import PropTypes from 'prop-types';

然后指定道具，我这样实现-

Text.propTypes = {
children: PropTypes.node.isRequired,
};


export default function Text({ children }) {
return (
<VStyle className="para">
<p>{children}</p>
</VStyle>
);
}

还可以在 eslintrc.json 或.js 文件中添加这个

"rules": {
"react/prop-types": "off"
}

小开

重复我对一个类似问题的回答: Https://stackoverflow.com/a/69199304/4290193

对于那些使用带有 react/prop-types验证规则的 React.FC<IProps>的人来说，eslint-plugin-react@^7.25.0似乎有解决了的问题。

所以

const Example: React.FC<IProps> = (props: IProps) => ...

在更新之后，这将在没有警告的情况下工作

const Example: React.FC<IProps> = (props) => ...

小开

取代禁用 prop-types规则，我们可以引入子属性作为组件道具的一部分，例如:

import React, { Component } from 'react';


export default class ErrorBoundary extends Component<{ children: React.ReactNode }> {
constructor(props: { children: React.ReactNode }) {
super(props);


this.state = { error: null, errorInfo: null };
}


componentDidCatch(error: Readonly<unknown>, errorInfo: Readonly<unknown>): void {
this.setState({ error, errorInfo });
}


render(): React.ReactElement | React.ReactNode {
const { children } = this.props;
const { error, errorInfo } = this.state as Readonly<Record<string, { componentStack: string }>>;


if (errorInfo)
return (
<details>
<h3>Oops, error detected.</h3>
<p>{error?.toString()}</p>
<p>{errorInfo?.componentStack}</p>
</details>
);
return children;
}
}

上面一个是得到 eslint错误消失的典型例子 ~ ~

别担心，开心点 ~ ~

小开

在新版本的 React 和 Next.js 上，您可以简单地导入 PropType，如下所示,

import PropTypes from "prop-types";

并在文件底部添加 defaultProps 和 protype，例如,

Post.defaultProps = {
posts: "",
};


Post.propTypes = {
posts: PropTypes.string,
};


export default Post;

它应该可以解决您的埃斯林特警告。

小开

另一种方式是:

文件: App.js

    ...
<Component1 key1="abc" />
...

文件: Component 1.js

1 错误:

    function Component1 ({ key1 }) {
console.log('key1', key1);
}

2 错误:

    function Component1 (props) {
let{ key1 } = props;
console.log('key1', key1);
}

3 工程:

注意: prop代替 props

    function Component1 (prop) {
let{ key1 } = prop;
console.log('key1', key1);
}

看起来，衬垫只检查合适的单词 props，而不是 prop或喜欢。
这是一个解决方案，如果您刚刚开始或快速原型。
对于后期或大型项目，定义原型可能更好。