我看到了很多类似的问题,但没有一个答案能解决我的代码中的问题。我使用React 17,Mui v5,TS v4。我尝试从https://www.npmjs.com/package/rc-dock实现一个简单的组件。我只是从代码框( codesandbox,Dock.js
):https://codesandbox.io/s/yo2cx?file=/src/Dock.js:0-860上的一个示例中复制并粘贴了一个代码到我的应用程序SceneComponent.tsx
中的一个文件中。我的VSCode经常突出显示Docklayout
元素并返回两个错误:
JSX元素类不支持属性,因为它没有'props‘property.ts(2607) 'DockLayout’不能用作JSX组件。它的实例类型'DockLayout‘不是一个有效的JSX元素。类型'DockLayout‘缺少’ElementClass‘类型中的下列属性: context、setState、forceUpdate、props和2 more.ts(2786)
DockLayout是从包中导入的,而不是我自己创建的,所以我不知道这是从这个错误中产生的。
package.json
{
"name": "APP",
"version": "1.0",
"description": "App",
"main": "src/index.tsx",
"scripts": {
"release": "webpack --config webpack.prod.config.js",
"debug": "webpack --config webpack.dev.config.js",
"test": "jest --verbose --coverage --runInBand",
"testinspect": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --verbose",
"start": "webpack-dev-server --open --hot --https --config webpack.dev.config.js --port 3002",
"pro": "webpack-dev-server --open --hot --config webpack.dev.config.js --port 3002",
"prorelease": "webpack-dev-server --open --hot --config webpack.prod.config.js --port 3002",
"jonsportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base ./",
"andersportal": "webpack-dev-server --open --hot --config webpack.dev.config.js --content-base c:/src/seismicportal",
"analyze": "webpack --config webpack.analyze.config.js",
"lint": "eslint"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.6.2",
"@mui/lab": "*",
"@mui/material": "^5.6.2",
"@mui/styles": "^5.9.0",
"@reactivex/rxjs": "github:reactivex/rxjs",
"@types/arcgis-js-api": "^4.20.1",
"@types/classnames": "^2.3.0",
"@types/jest": "^27.4.0",
"@types/lodash": "^4.14.173",
"@types/material-ui": "^0.21.9",
"@types/qs": "6.9.7",
"@types/react": "^17.0.47",
"@types/react-color": "^3.0.5",
"@types/react-dom": "^17.0.16",
"@types/uuid": "^8.3.1",
"assert": "^2.0.0",
"axios": "^0.21.4",
"buffer": "^6.0.3",
"classnames": "^2.3.1",
"d3": "^4.13.0",
"esri-loader": "^3.2.0",
"fast-png": "^6.1.0",
"fork-ts-checker-webpack-plugin": "6.3.3",
"geotiff": "^0.4.1",
"https-browserify": "^1.0.0",
"isomorphic-fetch": "^3.0.0",
"jest": "^27.4.7",
"jest-cli": "^27.4.7",
"jpeg-js": "^0.4.3",
"lerc": "^3.0.0",
"npm-check-updates": "^11.8.5",
"process": "^0.11.10",
"prop-types": "^15.7.2",
"qs": "^6.10.1",
"rc-dock": "^3.2.10",
"react": "^17.0.2",
"react-color": "^2.19.3",
"react-dom": "^17.0.2",
"react-rnd": "^10.3.5",
"react-virtualized-auto-sizer": "^1.0.6",
"react-virtuoso": "^2.13.1",
"react-window": "^1.8.7",
"rxjs": "^7.3.0",
"stream": "^0.0.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"terser-webpack-plugin": "^1.2.3",
"tinycolor2": "^1.4.2",
"ts-jest": "^27.1.4",
"ts-loader": "^4.5.0",
"ts-shader-loader": "^1.0.6",
"tss-react": "^3.6.2",
"util": "^0.12.4",
"uuid": "^8.3.2",
"webpack": "^4.41.6",
"webpack-cli": "^3.1.1",
"webpack-merge": "^4.1.4",
"webpack-simple-progress-plugin": "^0.0.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"copy-webpack-plugin": "^4.6.0",
"eslint": "^8.17.0",
"jest-extended": "^0.11.5",
"source-map-loader": "^0.2.4",
"ts-node": "^10.2.1",
"typescript": "^4.7.3",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-dev-server": "^3.11.0"
},
"jest": {
"verbose": true,
"modulePathIgnorePatterns": [
".*__mocks__.*"
],
"testURL": "http://localhost/",
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/test/.*|(\\.|/)(test|spec))\\.(ts?|tsx?)$",
"moduleFileExtensions": [
"ts",
"js",
"tsx"
]
},
"_id": "APP"
}
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"lib": ["es2016","dom", "es2017.object"],
"allowJs": true,
"declaration": false,
"moduleResolution": "node",
"jsx": "react",
"types": ["jest"],
"typeRoots": ["./types", "./node_modules/@types"]
},
"include": [
"./src/**/*" ,
"**/*.test.ts"
],
"exclude": [
"node_modules",
"js"
]
}
发布于 2022-07-18 11:21:42
不知何故,在"allowSyntheticDefaultImports" : true,
对象中向tsconfig.json
添加一行tsconfig.json
帮助了工作,代码运行良好。
https://stackoverflow.com/questions/73012162
复制相似问题