React TSX 组件示例

下面是一个使用 TypeScript 编写的 React 组件示例：

import React from 'react';

interface Props {
  name: string;
}

const Hello: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default Hello;

这个示例展示了如何创建一个简单的 React 组件，并使用 TypeScript 的类型定义来指定组件的属性。

在上面的代码中，我们定义了一个名为 Hello 的函数组件，它接受一个名为 name 的属性。然后，我们使用解构赋值从 props 对象中获取这个属性，并在组件内部渲染一个包含 name 的问候语。

通过使用 TypeScript 的 React.FC 泛型接口，我们可以明确地指定组件的属性类型，并在编码过程中获得更多的代码提示和类型检查。

请注意，上述代码示例中的返回值是 JSX 格式，而不是 Markdown 格式。如果你需要将代码片段转换为 Markdown 格式，请使用 triple backticks（```) 包裹代码，并在开头的三个 backticks 后添加语言标识符 tsx，如下所示：

import React from 'react';

interface Props {
  name: string;
}

const Hello: React.FC<Props> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default Hello;

这样，在 Markdown 中显示的代码片段就会被正确地格式化和高亮显示。