“xxx”類型缺少“ElementClass”類型的以下屬性：context、setState、forceUpdate、props 和另外 2 個。 TS2605

Question

嘗試運行我的反應應用程序時收到以下錯誤：

D:/React/my-components/src/App.tsx TypeScript D:/React/my-components/src/App.tsx(23,4) 中的錯誤：JSX 元素類型“確認”不是 JSX 的構造函數 function元素。 “確認”類型缺少“ElementClass”類型的以下屬性：上下文、setState、forceUpdate、props 和另外 2 個。 TS2605

21 |         </a>
22 |       </header>
23 |      <Confirm />
   |      ^
24 |     </div>
25 |   );
26 | }

這是我的確認組件代碼

 import * as React from "react"; class Confirm extends React.Component{ render(){ return ( <div className="confirm-wrapper confirm-visible"> <div className="confirm-container"> <div className="confirm-title-container"> <span>This is where our title should go</span> </div> <div className="confirm-content-container"> <p>This is where our content should go</p> </div> <div className="confirm-buttons-container"> <button className="confirm-cancel">Cancel</button> <button className="confirm-ok">Okay</button> </div> </div> </div> ); } } export default Confirm;

和 App.tsx 代碼

 import React from 'react'; import logo from './logo.svg'; import './App.css'; import Confirm from './Confirm'; const App: React.FC = () => { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> <Confirm /> </div> ); } export default App;

這是我的 package.json

 { "name": "my-components", "version": "0.1.0", "private": true, "dependencies": { "@types/jest": "24.0.18", "@types/node": "12.7.8", "@types/react": "16.9.4", "@types/react-dom": "16.9.1", "react-scripts": "3.1.2", "typescript": "3.6.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "react": "^16.10.1", "react-dom": "^16.10.1", "tslint": "^5.20.0", "tslint-config-prettier": "^1.18.0", "tslint-react": "^4.1.0" } }

Answer 1

謝謝大家，我已經通過運行以下命令修復了這個錯誤

紗線升級@types/react@latest

Answer 2

我有一個名為Component.tsx （駝峰式）的組件和一個名為component.ts （小寫）的助手，這似乎使這些變得混淆了。 我也在同一個文件中導入它們，所以我只是重命名了組件之一。