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>

相关推荐
清灵xmf16 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
qq_3901617731 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome