ESLint: 'React' 已定义但从未使用过。(no-unused-vars) 使用 JSX pragma 时

Question

当我使用 jsx pragma 时，如何阻止 eslint 抛出错误。

我正在使用 airbnb 配置，我尝试将 "react/jsx-uses-react": 1, 添加为一条无效的规则。

使用airbnb时需要在extends中包含plugin:react/recommended吗？

.eslintrc.js

  extends: [
    "airbnb",
    "airbnb/hooks",
    "plugin:react-redux/recommended",
    "plugin:prettier/recommended",
    "prettier/react",
  ],
  settings: {
    react: {
      version: "detect",
    },
  },
  plugins: ["emotion", "graphql", "prettier", "react-redux"],
  rules: {
    "emotion/jsx-import": "error",
    "emotion/no-vanilla": "error",
    "emotion/import-from-emotion": "error",
    "emotion/styled-import": "error",
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    "graphql/template-strings": [
      `error`,
      {
        env: `relay`,
        tagName: `graphql`,
      },
    ],
  },

layout.js

/* ESLint: 'React' is defined but never used.(no-unused-vars) */
import React from "react" 
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

/** @jsx jsx */
import { Global, css, jsx } from "@emotion/core"
import { ThemeProvider } from "emotion-theming"

Answer 1

我在仅导出样式组件时遇到了类似的问题。我将其包裹在 <React.Fragment> 中，然后将其导出。

之前：

import React from 'react';
import styled from '@emotion/styled';

export const LabelText = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

之后：

import React from 'react';
import styled from '@emotion/styled';

const StyledSpan = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

export const LabelText = ({ children }) => (
  <React.Fragment>
    <StyledSpan>{children}</StyledSpan>
  </React.Fragment>
);