React TypeScript 定义组件的各种方式

目录

  • 举例说明
  • [1. 使用 class 定义](#1. 使用 class 定义)
  • [2. 使用函数定义](#2. 使用函数定义)
    • [2.1 使用普通函数](#2.1 使用普通函数)
    • [2.2 使用函数组件](#2.2 使用函数组件)

举例说明

比如我们要定义一个计数器 Counter,它包含一个 label 和一个 button,计数器的初始值由外部传入,点击 button 计数加 1:

这虽然是个简单组件,但却包含了 React 定义组件的两大核心点:

  1. 属性由外部传入
  2. 状态由内部控制

组件样式:

typescript 复制代码
// counter样式
const counterStyle = {
  backgroundColor: "orange",
  width: "100px",
  height: "100px",
  borderRadius: "10px",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
} as React.CSSProperties;

使用组件:

typescript 复制代码
<Counter initialCount={6} />

1. 使用 class 定义

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 状态
type State = {
  count: number;
};

// 计数器
class Counter extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: props.initialCount,
    };
  }

  render() {
    return (
      <div style={counterStyle}>
        <p>count={this.state.count}</p>
        <button
          onClick={() => {
            this.setState({
              count: this.state.count + 1,
            });
          }}
        >
          加 1
        </button>
      </div>
    );
  }
}

2. 使用函数定义

2.1 使用普通函数

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
function Counter(props: Props) {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
}

注:此函数返回的类型是 JSX.Element

2.2 使用函数组件

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
const Counter = (props: Props) => {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
};

注:此函数返回的类型是 JSX.Element

若需要,可以指定函数返回的具体类型:

typescript 复制代码
// 属性
type Props = {
  // 初始count
  initialCount: number;
};

// 计数器
const Counter: React.FC<Props> = (props) => {
  const [count, setCount] = useState(props.initialCount);
  return (
    <div style={counterStyle}>
      <p>count={count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        加 1
      </button>
    </div>
  );
};

此时函数的返回值类型是 React.FC<Props>

相关推荐
叶玳言1 天前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳1 天前
HTML 基本结构
前端
Gazer_S1 天前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐1 天前
Html重绘和重排
前端·html
_Rookie._1 天前
vue3 使用css变量
前端·javascript·html
杨超越luckly1 天前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦1 天前
2025-09-04 HTML3——区块布局与表单
前端·css·html
GIS之路1 天前
GDAL 开发起步
前端
被巨款砸中1 天前
前端视角下的 Web 安全攻防:XSS、CSRF、DDoS 一次看懂
前端·安全·xss
一支鱼1 天前
leetcode-6-正则表达式匹配
算法·leetcode·typescript