在 React 中使用 TypeScript、使用CRA创建TS项目、React 中的常用类型
import React from 'react';
// 定义一个接口来描述组件的属性
interface MyComponentProps {
message: string;
count?: number; // count是可选属性
}
// 使用React.FunctionComponent来明确这是一个函数组件
const MyComponent: React.FunctionComponent<MyComponentProps> = ({ message, count = 0 }) => {
return (
<div>
<p>{message}</p>
{count > 0 && <span>Count: {count}</span>}
</div>
);
};
export default MyComponent;这段代码定义了一个React组件，它接受一个包含message字符串属性和可选count数值属性的对象。组件返回一个包含消息和计数（如果存在）的<div>元素。这是一个很好的React和TypeScript组合的示例。
评论已关闭