在 React+Typescript 项目环境中创建并使用组件

作者：System 时间：2024年08月10日分类：所有,typescript 字数：643




import React, { FC } from 'react';
import { View, Text } from 'react-native';
 
// 定义组件的属性类型
interface MyComponentProps {
  text: string;
  style?: object; // 使用 'object' 类型表示可选的样式对象
}
 
// 使用 FC 类型定义一个功能组件
const MyComponent: FC<MyComponentProps> = ({ text, style }) => {
  return (
    <View>
      <Text style={style}>{text}</Text>
    </View>
  );
};
 
export default MyComponent;

这段代码定义了一个简单的React Native组件，它接收两个属性：text和style。text是一个字符串，表示要显示的文本内容，而style是一个可选的样式对象，用于定义文本的样式。组件使用了TypeScript的接口（interface）来定义属性类型，并通过使用FC（Function Component）简化了组件的定义过程。这是一个典型的在React+Typescript项目中创建和使用组件的例子。

在 React+Typescript 项目环境中创建并使用组件

评论已关闭

推荐阅读