首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >RC-坞库的“DockLayout”不能用作JSX组件。它的实例类型'DockLayout‘不是一个有效的JSX元素

RC-坞库的“DockLayout”不能用作JSX组件。它的实例类型'DockLayout‘不是一个有效的JSX元素
EN

Stack Overflow用户
提问于 2022-07-17 13:25:33
回答 1查看 86关注 0票数 0

我看到了很多类似的问题,但没有一个答案能解决我的代码中的问题。我使用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是从包中导入的,而不是我自己创建的,所以我不知道这是从这个错误中产生的。

代码语言:javascript
运行
复制
package.json

代码语言:javascript
运行
复制
{
  "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"
}

代码语言:javascript
运行
复制
tsconfig.json

代码语言:javascript
运行
复制
{
    "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"
    ]    
}

EN

回答 1

Stack Overflow用户

发布于 2022-07-18 11:21:42

不知何故,在"allowSyntheticDefaultImports" : true,对象中向tsconfig.json添加一行tsconfig.json帮助了工作,代码运行良好。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73012162

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档