【React】1427- 如何使用 TypeScript 开发 React 函数式组件?
import React, { FC } from 'react';
import { Button } from '@alifd/next';
// 定义接口来描述属性
interface HelloProps {
name: string;
enthusiasmLevel?: number;
}
// 使用FC类型定义一个功能组件
const Hello: FC<HelloProps> = ({ name, enthusiasmLevel = 1 }) => {
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<Button type="primary">Hello, {name + getExclamationMarks(enthusiasmLevel)}</Button>
</div>
);
};
const getExclamationMarks = (numChars: number) => {
return Array(numChars).join('!');
};
export default Hello;
这段代码定义了一个名为Hello的函数式组件,它接收name和enthusiasmLevel两个属性,并在按钮中显示一段带有激动度的问候语。使用TypeScript的类型系统来确保props的正确性,并使用了FC来简化函数式组件的定义。
评论已关闭