react tsx语法

React TSX 是一种使用 TypeScript 语言编写 React 组件的语法。以下是一个简单的 React TSX 组件示例：

import React from 'react';

type Props = {
  name: string;
  age: number;
};

const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};

export default MyComponent;

在这个示例中，我们定义了一个名为 `MyComponent` 的函数组件，并使用 `React.FC` 类型定义了它的 props。在组件内部，我们可以通过解构 props 对象来获取传递给组件的属性，并使用 JSX 语法来渲染组件。注意，在 TSX 中，我们可以通过使用 `{}` 将 JavaScript 表达式嵌入到 JSX 中。

此外，我们还需要使用 TypeScript 的编译器来编译这个组件。通常，我们可以使用 `tsconfig.json` 文件来配置 TypeScript 编译器，例如：

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

其中，`jsx` 选项指定了我们使用 React TSX 语法，`esModuleInterop` 选项指定了我们使用 ES6 的模块导入语法，`module` 选项指定了我们使用 CommonJS 模块系统，`target` 选项指定了我们的代码将编译成 ES5 语法，`moduleResolution` 选项指定了我们使用 Node.js 的模块解析方式，`sourceMap` 选项指定了我们生成源代码映射。