react从jsx变为tsx

react从jsx变为tsx过程中,当tsx文件使用到ts法语时报错,但是可以识别ts和tsx文件,仅此而已

将React项目从JSX转为TSX涉及到一些步骤。首先，你需要安装TypeScript和相关的类型定义。然后，你需要将你的.jsx文件重命名为.tsx文件，并在你的代码中添加类型注解。最后，你需要更新你的构建配置以支持TypeScript。

以下是一些具体的步骤：

  1. 安装TypeScript和相关的类型定义：
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

  1. 将你的.jsx文件重命名为.tsx文件。你可以手动做这个，或者使用一个命令行工具如rename。

  2. 在你的代码中添加类型注解。例如，如果你有一个React组件，你可能需要这样做：

import React, { FunctionComponent } from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: FunctionComponent<MyComponentProps> = ({ name }) => (
  <div>{name}</div>
);

export default MyComponent;

  1. 更新你的构建配置以支持TypeScript。如果你使用的是Create React App，那么它应该已经支持TypeScript了。如果你使用的是Webpack，你可能需要添加一个新的loader来处理.tsx文件，例如ts-loader。

  2. 如果你遇到错误，确保你的所有依赖项都已经更新到最新版本，包括你的TypeScript编译器和所有的类型定义。你也可以尝试清除你的node_modules目录并重新安装依赖项。

  3. 如果你的项目使用ESLint，你可能需要安装@typescript-eslint/parser和@typescript-eslint/eslint-plugin，并更新你的ESLint配置。

如果你在转换过程中遇到具体的错误，你可以提供更多的信息，我会尽力帮助你解决。

  • 这篇博客也许可以解决你的问题👉 ：React中JSX的使用(嵌入式js表达式,条件渲染,列表渲染,样式处理)
  • 除此之外, 这篇博客: 初识React和JSX语法：带你走入React世界,让你彻底明白JSX语法中的 什么是JSX 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • JSX是 Facebook 起草的 JS 扩展语法，需要使用 babel 进行转义
    // ...
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    ReactDOM.render(<h1>这是一个标题</h1>, document.getElementById("root"))
</script>
    • 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement
    const div = ( <div>这是一个div元素</div> )
//会被转换为
Reeact.createElement("div",{},"这是一个div元素")
    • 每个JSX表达式，有且仅有一个根节点
      • React.Fragment：如果想要有多个根节点，可以使用 React.Fragment ，它不会把<React.Fragment>渲染到页面上
    const h1 = (
  <React.Fragment>
    <h1>这是第一个JSX语法</h1>
    <p>这是内容</p>
  </React.Fragment>
)
//
const h1 = (
  <>
    <h1>这是第一个JSX语法</h1>
    <p>这是内容</p>
  </>
)
    • 每个 JSX 元素要遵循 XML 规范，必须有结束标签
    const img =  <img src="./logo.png" alt=""> //报错

//正确写法
const img =  <img src="./logo.png" alt="" /> //自闭合标签
const img =  <img src="./logo.png" alt=""></img>