相关疑难解决方法(0)

在 React 中使用 Typescript 时，我们必须jsx在文件compilerOptions中指定tsconfig.json。

它有preserve、react、react-native等react-jsx作为允许值。

{
  "compilerOptions": {
    "jsx": "react-jsx" | "react" | "react-native" | "preserve"
  }
}

react主要react-jsx用于网络我想了解这两个选项之间的区别以及何时选择哪一个

react将 jsx 翻译为React.createElement()

react-jsx将 jsx 翻译为_jsx()and_jsxs()

_jsx()还有和之间有什么区别_jsxs()？

我更新了我的项目以创建 react app 4.0，并且我正在放缓将我的文件移动到 TypeScript。我知道使用这个新版本，您不必重复从“react”导入 React。但是，在我未导入 React 的所有 TS 文件中，我收到此错误'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)。我知道我可以通过导入 React 来修复它，但我认为这不再需要了。另外，有人可以解释这个错误的含义吗？

我的基本 TSX 文件

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

我正在使用VS 2013和tsx文件做出反应.我可以手动构建我的项目.(右键单击并构建解决方案)

但是当我尝试在Azure上发布时,VS会再次尝试构建,但当时我收到的所有错误都表示为:

Error   2   Build: Cannot use JSX unless the '--jsx' flag is provided. 

并指向我的tsx文件.

看起来像Azure Publish使用不同于VS 2013的构建步骤.

我该如何解决这个问题？

嘿伙计们，这个问题还没有通过类似的解决，

\n
1. 构建：除非提供“--jsx”标志，否则无法使用 JSX
\n
2. 除非提供“--jsx”标志，否则无法使用 JSX
\n

尝试了他们的解决方案，但对我不起作用。

现在我的情况\n tsconfig.js

{\n    "compilerOptions": {\n        "noUnusedLocals": false,\n        "noUnusedParameters": false,\n        "noImplicitReturns": false,\n        "noImplicitAny": false,\n        "skipLibCheck": false,\n        "strict": false,\n        "strictNullChecks": false,\n        "allowSyntheticDefaultImports": true,\n        "esModuleInterop": true,\n        "resolveJsonModule": true,\n        "experimentalDecorators": true,\n        "emitDecoratorMetadata": true,\n        "declaration": true,\n        "jsx": "react",\n        "module": "commonjs",\n        "moduleResolution": "node",\n        "target": "es6",\n        "outDir": "./dist",\n        "lib": [\n            "dom",\n            "esnext"\n        ]\n    },\n    "esModuleInterop": true,\n    "include": [\n        "src/components/canvas/index.tsx",\n        "src/components/canvas/Canvas.tsx",\n        "src/components/canvas/global.d.ts"\n    ],\n    "exclude": [\n        "node_modules",\n        "dist",\n        "lib"\n    ]\n}\n\n

gulpfile.js

\nconst gulp …

打字稿抛出：

除非提供了“--jsx”标志，否则无法使用 JSX。ts(17004)

更改tsconfig.json jsx为 后react-jsx，jsx 工作。yarn start将 tsconfig.jsonreact-jsx再次更改为。

react-scripts 已更新至 4.0.1。

包.json

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "semantic-ui-css": "^2.4.1",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.9",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.8.1",
    "@typescript-eslint/parser": "^4.8.1",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "typescript": "^4.1.2"
  },

配置文件

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": …