reactjs react 'component'不能用作JSX组件

ecbunoof  于 2023-05-17  发布在  React
关注(0)|答案(1)|浏览(261)

我遇到了2天的错误，我得到的错误是我的react不能用作JSX组件。
完整错误：
“ExportTemplateModal”不能用作JSX组件。其元素类型'ReactElement<any，any>| Component<Omit<Subtract<IExportTemplateModalProps，WithTranslationProps>，keyof WithTranslation<...>> & WithTranslationProps，any，any>| null'不是有效的JSX元素。类型“Component<Omit<Subtract<IExportTemplateModalProps，WithTranslationProps>，keyof WithTranslation<N，undefined>> & WithTranslationProps，any，any>”不可分配给类型“Element|元素类|类型“Component<Omit<Subtract<IExportTemplateModalProps，WithTranslationProps>，keyof WithTranslation<N，undefined>> & WithTranslationProps，any，any>”不可分配给类型“ElementClass”。“render（）”返回的类型在这些类型之间不兼容。类型“ReactNode”不可分配给类型“false|元素|类型“undefined”不能分配给类型“false|元素|空'。
下面是我得到这个错误的组件：

export class ExportTemplateModal extends React.Component<
  IExportTemplateModalProps,
  IExportTemplateModalState
  > {
  private _subscriptionTimer: number = 0;

  constructor(props: IExportTemplateModalProps) {
    super(props);
    this.state = { ...initialState };
    this._handleClose = this._handleClose.bind(this);
    this._handleExport = this._handleExport.bind(this);
    this._handleStatusUpdate = this._handleStatusUpdate.bind(this);
  }

  public async componentDidMount() {
    const { projectSuppliers } = this.props;
    const supplierMap = constructSupplierMap(projectSuppliers);
    const allPartnerIDs = projectSuppliers.map(supplier => supplier.supplierId).filter(Boolean);
    const partnerInfo = await loadPartnerInfo(allPartnerIDs);
    this.setState({ partnerInfo, supplierMap });
  }

  public render() {
    const { open, projectSuppliers } = this.props;
    const { status } = this.state;
    const { Status } = status;
    const suppliers = addGenericSupplier(projectSuppliers);

    return (
      <Modal
        bodySpacingInset="large"
        data-id="quote-export-template-modal-content"
        open={open}
        onClose={this._handleClose}
        title="Export template"
        scrollContainer="modal"
        width="35rem"
      >
        <div id="quote-export-template-modal-content">
          {Status === 'NOT_STARTED' && this._renderSupplierSelection(suppliers)}
          {Status !== 'NOT_STARTED' && this._renderExportStatus()}
        </div>
        {Status === 'NOT_STARTED' && (
          <ModalFooter>
            <Row alignmentVertical="center" alignmentHorizontal="right" widths="fit">
              <Button className="mr3" type="secondary" onClick={this._handleClose}>
                Cancel
              </Button>
              <Button type="primary" onClick={this._handleExport}>
                Export
              </Button>
            </Row>
          </ModalFooter>
        )}
      </Modal>
    );
  }

 
}

export default withTranslation()(ExportTemplateModal);

这里是package.json，我试图改变react版本和react-dom并运行npm install，但它不起作用。我不知道我哪里做错了。如果我导出export default Component as any，它会停止抱怨，但我不知道这是否是修复，因为在我的单元测试中，我得到了另一个错误，它抱怨React Package 器，这是错误=> Error: ReactWrapper::state() can only be called on class components

"dependencies": {
   "@amzn/pb-central-gql-schema": "*",
   "@amzn/pb-central-ui-components": "^1.0.0",
   "@hookform/resolvers": "^1.3.7",
   "@react-icons/all-files": "^4.1.0",
   "@testing-library/dom": "^8.13.0",
   "@testing-library/react-hooks": "^8.0.1",
   "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
   "emotion": "^10.0.27",
   "is-hotkey": "^0.1.8",
   "is-url": "^1.2.4",
   "jest-environment-jsdom-sixteen": "^2.0.0",
   "lodash.clonedeep": "^4.5.0",
   "lodash.differenceby": "^4.8.0",
   "lodash.escaperegexp": "^4.1.2",
   "lodash.get": "^4.4.2",
   "lodash.isempty": "^4.4.0",
   "lodash.isequal": "^4.5.0",
   "lodash.set": "^4.3.2",
   "lodash.sortby": "^4.7.0",
   "lodash.uniqueid": "^4.0.1",
   "office-ui-fabric-react": "^7.107.0",
   "react-hook-form": "^6.15.7",
   "react-i18next": "^11.18.3",
   "react-redux": "^8.0.2",
   "react-router-dom": "^5.2.0",
   "slate": "^0.60.8",
   "slate-history": "^0.59.0",
   "slate-react": "^0.60.8"
 },
 "peerDependencies": {
   "@amzn/meridian": "*",
   "@amzn/meridian-tokens": "*",
   "react": "^16.13.0",
   "react-dom": "^16.13.0",
   "date-fns": "^2.16.1"
 },
 "devDependencies": {
   "@amzn/brazil": "*",
   "@amzn/meridian": "*",
   "@amzn/meridian-tokens": "*",
   "@babel/core": "^7.6.0",
   "@babel/helper-validator-identifier": "7.10.4",
   "@babel/plugin-proposal-class-properties": "^7.12.1",
   "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
   "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
   "@babel/plugin-proposal-optional-chaining": "^7.12.1",
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
   "@babel/plugin-transform-react-jsx": "^7.12.1",
   "@babel/plugin-transform-runtime": "^7.12.1",
   "@babel/plugin-transform-typescript": "^7.12.1",
   "@babel/preset-env": "^7.12.1",
   "@babel/preset-react": "^7.12.1",
   "@babel/preset-typescript": "^7.12.1",
   "@babel/runtime": "7.4.5",
   "@sheerun/mutationobserver-shim": "^0.3.3",
   "@storybook/addon-actions": "^6.0.26",
   "@storybook/addon-essentials": "^6.0.26",
   "@storybook/addon-info": "5.3.21",
   "@storybook/addon-knobs": "^6.0.26",
   "@storybook/addon-links": "^6.0.26",
   "@storybook/addons": "^6.0.26",
   "@storybook/react": "^6.0.26",
   "@testing-library/jest-dom": "^5.16.1",
   "@testing-library/react": "^12.1.2",
   "@types/date-fns": "^2.6.0",
   "@types/enzyme": "^3.10.7",
   "@types/history": "^4.7.8",
   "@types/is-url": "^1.2.4",
   "@types/jest": "^26.0.24",
   "@types/lodash.clonedeep": "^4.5.6",
   "@types/lodash.differenceby": "^4.8.6",
   "@types/lodash.get": "^4.4.6",
   "@types/lodash.isempty": "^4.4.6",
   "@types/lodash.isequal": "^4.5.5",
   "@types/lodash.set": "^4.3.6",
   "@types/lodash.sortby": "^4.7.6",
   "@types/react": "^16.9.23",
   "@types/react-dom": "^16.9.5",
   "@types/react-router-dom": "^5.2.0",
   "@types/storybook-react-router": "^1.0.1",
   "@typescript-eslint/eslint-plugin": "^4.4.0",
   "@typescript-eslint/parser": "^4.4.0",
   "babel-eslint": "^10.1.0",
   "babel-loader": "^8.1.0",
   "babel-plugin-module-resolver": "^3.1.1",
   "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
   "date-fns": "^2.16.1",
   "enzyme": "^3.11.0",
   "enzyme-adapter-react-16": "^1.15.5",
   "eslint": "7.11.0",
   "eslint-config-prettier": "^7.0.0",
   "eslint-plugin-jest": "^24.1.0",
   "eslint-plugin-react": "^7.21.5",
   "file-loader": "^6.2.0",
   "fs-extra": "^5.0.0",
   "globby": "^8.0.1",
   "history": "^4.10.1",
   "husky": "^4.3.8",
   "identity-obj-proxy": "^3.0.0",
   "jest": "^24.9.0",
   "jest-environment-enzyme": "^7.1.2",
   "jest-enzyme": "^7.1.2",
   "jest-transform-stub": "^2.0.0",
   "jest-when": "^3.2.1",
   "lint-staged": "^10.5.3",
   "prettier": "^2.2.1",
   "prettier-plugin-organize-imports": "^1.1.1",
   "react-to-typescript-definitions": "^1.2.0",
   "storybook-react-router": "^1.0.8",
   "typescript": "^4.2.4",
   "webpack-cli": "^4.2.0"
 },
 "npm-pretty-much": {
   "publishDir": "",
   "runRelease": "always"
 },
 "husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
   "src/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
 }

我试过：

  • 运行npm i react@18 react-dom@18 @types/react@18 @types/react-dom@18
  • 删除node_module并重新安装npm
  • 玩弄进口货

任何帮助将不胜感激。

reactjs

1条答案

按热度按时间
yptwkmov

yptwkmov1#

以下是决议：
解决问题如下：
将以下内容添加到package.json文件
"resolutions": { "@types/react": "17.0.14", "@types/react-dom": "17.0.14" },
将以下内容添加到package.json文件中的'scripts'会话：
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"

赞(0）分享  回复(0）举报  2023-05-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com