本文简单介绍React17升级时，.tsx里jsx语法报错的解决方法。
本文关键词：React17、typescript、jsx。
原因和现象
原因是React17提供了全新的，重构过的jsx转换。当你使用create-react-app创建新的应用，并支持typescript且使用了eslint时，你就会发现.tsx里jsx语法报错。因为应用虽然默认使用旧的jsx转换，但次级依赖库Babel的版本是7.9.0以后
虽然应用能够运行成功，但看着就很不顺眼啊。
解决方法
官方说可以继续使用旧的jsx转换，但我选择更新个别库的版本以支持新的jsx转换。 我的想法是既然都使用React17了就没有必要使用旧的jsx转换，想用旧的话React16它不香吗。
开干。
需要修改两个地方。一是vscode的typescript版本配置，二是package.json个别依赖库的版本。
typescript
打开Settings检索"typescript tsdk"，勾选第一个选项：允许提示用户使用在工作区中为Intellisense配置的TypeScript版本。
下面会把工作区使用的Typescript版本升级到4.1.2。
确保应用的根目录有一个.vscode文件夹里面有一个settings.json文件，该文件如下。
package.json
{
"dependencies": {
//...
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"typescript": "4.1.2",
},
//...
}
完成对package.json文件的修改后，执行yarn install命令安装新的版本依赖。
.eslintrc.json
如果你的应用还配置了eslint的话，还要如官方所示，关闭或删除以下规则
//···
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
//···
