Error : does not match the corresponding name on disk, REACT

Question

我有这个错误： ./src/pages/Freelances/index.jsx 找不到文件：'index.jsx' 与磁盘上的相应名称不匹配：'.\src\components\Card\Components'。我真的不明白为什么。

我的代码是：

import Card from '../../components/Card'
import styled from 'styled-components'
import colors from '../../utils/style/colors'
import React from 'react'

const CardsContainer = styled.div`
  display: grid;
  gap: 24px;
  grid-template-rows: 350px 350px;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
`

const PageTitle = styled.h1`
  font-size: 30px;
  color: black;
  text-align: center;
  padding-bottom: 30px;
`

const PageSubtitle = styled.h2`
  font-size: 20px;
  color: ${colors.secondary};
  font-weight: 300;
  text-align: center;
  padding-bottom: 30px;
`

const freelanceProfiles = [
  {
    name: 'Jane Doe',
    jobTitle: 'Devops',
  },
  {
    name: 'John Doe',
    jobTitle: 'Developpeur frontend',
  },
  {
    name: 'Jeanne Biche',
    jobTitle: 'Développeuse Fullstack',
  },
]

function Freelances() {
  return (
    <div>
      <PageTitle>Trouvez votre prestataire</PageTitle>
      <PageSubtitle>
        Chez Shiny nous réunissons les meilleurs profils pour vous.
      </PageSubtitle>
      <CardsContainer>
        {freelanceProfiles.map((profile, index) => (
          <Card
            key={`${profile.name}-${index}`}
            label={profile.jobTitle}
            title={profile.name}
          />
        ))}
      </CardsContainer>
    </div>
  )
}

export default Freelances

如果我从 react 中取回导入 react，我会遇到此错误： ./src/pages/Freelances/index.jsx 第 46 行：使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内第 47 行：使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内第 48 行：使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内第 51 行：使用 JSX react/react-in-jsx-scope 时，'React' 必须在范围内第 53 行：使用 JSX react/react-in-jsx-scope

时，'React' 必须在范围内

我只是想将在 TP 中工作的代码用于其他东西。您知道导致此错误的原因吗？

Answer 1

确保您已在所有包含 jsx 的文件中导入 React。比如，import React from 'react' 您的构建系统可能还要求带有 jsx 的文件具有 .jsx 或 .tsx 扩展名（不仅仅是 .js / .ts）
确保代码中引用的文件名与文件系统中的实际文件名匹配。如果文件名的大小写发生变化，则可能会出现问题。将文件名保持小写可能是避免此类问题的好主意

Error : does not match the corresponding name on disk, REACT

Error : does not match the corresponding name on disk, REACT

error-handling

reactjs