发现奇怪的错误编译了React应用程序

Question

这在tempselector.tsx文件中。

app.tsx文件具有以下代码：

import './App.css'
import tempSelector from "./tempSelector.tsx";

function App() {

  return (
    <>
        <tempSelector />
    </>
  )
}

export default App

不幸的是，奇怪的是，我在app.tsx中看到以下汇编错误：

TS6133: 'tempSelector' is declared but its value is never read.
ESLint: 'tempSelector' is defined but never used. (@typescript-eslint/no-unused-vars)
TS2339: Property 'tempSelector' does not exist on type 'JSX.IntrinsicElements'.

这些错误对我没有意义。我将tempselector包括在应用程序组件中，但是看起来该应用程序并没有“看到” tempselector，而tempselector则无法正确处理返回类型。

没有人知道这里发生了什么？更重要的是：我该如何解决此问题？

不仅是导入的牙套，还不仅仅是导出的牙套。使用

ES6

，通常采用

default export

方法：

tempSelector.tsx

Answer 1

import {Autocomplete, TextField} from "@mui/material";

const theData = [
  // ...data
];

const TempSelector = () => {
  return(
     {/* ...component */}
  );
}

export default TempSelector;

将与

export default function tempSelector() {/* ...content */}

.

相同。

App.tsx

：

import TempSelector from "./tempSelector";

//...other codes

您也可以使用

export

方法，但是语法将是：

tempSelector.tsx

：

import {Autocomplete, TextField} from "@mui/material";

const theData = [
  // ...data
];

const TempSelector = () => {
  return(
     {/* ...component */}
  );
}

export { TempSelector };

App.tsx

：

import { TempSelector } from "./tempSelector";

//...other codes