为什么 ESLint 在我的 React 和 Typescript 项目中抱怨 props 验证

问题描述

我使用 Typescript 来定义和输入我的道具。我正在使用 ESLint 和 eslint-config-airbnb-typescript。

我使用 gatsby-plugin-graphql-codegen 为我的 graphQL 查询生成类型。

ESLint 抱怨 props 验证。

这是 React/Gatsby 对应的 index.tsx 文件：

import React from 'react';
import { PageProps,Link,graphql } from 'gatsby';

import Layout from 'components/layout';
import Image from 'components/image';
import SEO from 'components/seo';

import { ProductsQuery } from '../../graphql-types';

    const IndexPage: React.FC<PageProps<ProductsQuery>> = ({ data: { products } }) => (
      <Layout>
        <SEO title="Home" />
        <h1>Hi people</h1>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <div style={{ maxWidth: `300px`,marginBottom: `1.45rem` }}>
          <Image />
        </div>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
        <ul>
          {products.nodes.map((product) => (
            <li key={product.id}>
              <h3>{product.name}</h3>
            </li>
          ))}
        </ul>
      </Layout>
    );
    
    export const pageQuery = graphql`
      query Products {
        products: allGraphCmsProduct {
          nodes {
            id
            name
          }
        }
      }
    `;
    
    export default IndexPage;

如果我在 ESLint 规则中添加 'react/prop-types': 'off' 就可以了。这是正确的方法吗？由于我使用 Typescript 定义我的类型，因此我不需要 React prop-types，但为什么会出现此错误，我认为 eslint-config-airbnb-typescript 会处理这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）