7、React与TypeScript开发入门：组件、状态与事件处理

React与TypeScript开发入门：组件、状态与事件处理

1. 组件提取与 children 属性的使用

在开发过程中，为了提高代码的复用性，我们可以从 HomePage.tsx 中提取一些组件。这里，我们将利用 children 属性来创建 Page 和 PageTitle 组件。

1.1 创建 PageTitle.tsx

在 src 文件夹下创建 PageTitle.tsx 文件，代码如下：

import React from 'react'; 
interface Props {
  children: React.ReactNode;
}
export const PageTitle = ({
  children,
}: Props) => <h2>{children}</h2>;

上述代码中，我们定义了一个 Props 接口，其中 children 属性的类型为 React.ReactNode ，这使得我们可以使用多种类型的子元素，如其他React组件或纯文本。在 h2 元素内部引用了 children 属性，这意味着使