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>

相关推荐
打不着的大喇叭36 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code42 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟44 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠1 小时前
nginx的使用
java·运维·服务器·前端·git·nginx·github