### React Functional Component with
Props 类型定义与用法
在现代 React
开发中，函数式组件（Functional Components, 简称
FC）因其简洁性和可维护性而被广泛采用。通过 TypeScript 定义函数式组件的 `
Props`
类型可以增强代码的安全性和可读性。
#### 函数式组件基础
函数式组件本质上是一个纯
JavaScript 函数，它接收一个名为 `
props` 的
参数并返回 JSX 元素[^1]。以下是其基本结构：
```tsx
const MyComponent: React.
FC<My
Props> = (
props) => {
return (
<div>
<h1>{
props.title}</h1>
<p>{
props.description}</p>
</div>
);
};
```
在此示例中，`MyComponent` 是一个函数式组件，它的
类型由 `React.
FC<My
Props>` 提供，其中 `My
Props` 表示传递给该组件的
属性接口。
#### 使用
Props 接口定义
为了使函数式组件更加健壮和易于理解，通常会先定义一个 `
Props` 接口来描述所需的数据形状。例如：
```typescript
interface My
Props {
title: string;
description?: string; // 可选
属性
}
const MyComponent: React.
FC<My
Props> = ({ title, description }) => {
return (
<div>
<h1>{title}</h1>
{description && <p>{description}</p>}
</div>
);
};
```
上述代码展示了如何利用解构语法简化对 `
props`
属性的访问，并处理可能存在的可选字段。
#### 默认
Props 设置
如果某些
属性具有默认值，则可以通过设置 `
defaultProps` 来实现这一功能。然而，在使用 `React.
FC` 时需要注意，默认值应直接
赋值于组件本身而非单独声明
defaultProps 对象：
```typescript
interface Greeting
Props {
name?: string;
}
const Greeting: React.
FC<Greeting
Props> = ({ name = 'Guest' }) => {
return <span>Hello, {name}!</span>;
};
// 或者更传统的方式：
Greeting.
defaultProps = {
name: 'Guest',
};
```
#### 儿子向父亲传值机制简介
虽然本问题是关于函数式组件及其 `
Props`
类型定义，但值得一提的是父子组件间的通信也是 React 应用
开发中的重要部分之一。对于儿子到父亲方向上的数据流动，一般借助回调函数完成。如下所示：
```tsx
class Parent extends React.Component<{ onChildClick: () => void }> {
handleClick = () => console.log('Clicked from child');
render() {
return <Child onClick={this.handleClick} />;
}
}
const Child: React.
FC<{ onClick: () => void }> = ({ onClick }) => (
<button onClick={onClick}>Notify Parent</button>
);
```
以上例子说明了父级将方法作为 prop 下放到子级以便后者调用的情况。
#### 总结
- 函数式组件是一种轻量化的替代类组件的方法。
- 结合 TypeScript 能够显著提升应用质量，推荐始终为
props 明确指定
类型。
- 数据可以在
不同层次之间双向传输——从父母至子女以及反之亦然皆可行。
本文讲述了在React中，当无状态函数组件（FC）与React.forwardRef结合时遇到的类型错误，并详细介绍了问题原因及解决方案，即如何通过普通函数组件来避免此类错误。
扫一扫
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
