【ReactJs 中使用 TSX】基本、组件、方法、实现类的类型标注

2024-01-07 17:52:43

组件事件

Click实现

Button 组件

import React from 'react';

type ButtonClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;

interface ButtonProps {
  onClick: ButtonClickHandler;
}

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

export default Button;

用到 Button 组件的父组件

import React from 'react';
import Button from './Button'

interface MyComponentProps {
  // ...
}

const MyComponent: React.FC<MyComponentProps> = () => {
  const handleButtonClick: ButtonClickHandler = (event) => {
    // 处理按钮点击事件...
  };

  return (
    <div>
      <h1>My Component</h1>
      <Button onClick={handleButtonClick}>Click me</Button>
    </div>
  );
};

ButtonClickHandler 是类型的名称,而 (event: React.MouseEvent<HTMLButtonElement>) => void 描述了这个类型的结构

具体来说,(event: React.MouseEvent<HTMLButtonElement>) 定义了事件处理程序的参数类型,表示它接受一个 React 提供的 MouseEvent 事件对象,并且这个事件是由 HTMLButtonElement 元素触发的。而 => void 表示事件处理程序不会返回任何值

Change实现

Input 组件

import React from 'react';

type InputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => void;

interface InputProps {
  onChange: InputChangeHandler;
}

const Input: React.FC<InputProps> = ({ onChange, value }) => {
  return <input type="text" onChange={onChange} value={value} />;
};

export default Input;

用到 Input 组件的父组件

import React from 'react';

interface MyComponentProps {
  // ...
}

const MyComponent: React.FC<MyComponentProps> = () => {
  const handleInputChange: InputChangeHandler = (event) => {
    // 处理输入框变化事件...
  };

  return (
    <div>
      <h1>My Component</h1>
      <Input onChange={handleInputChange} />
    </div>
  );
};

InputChangeHandler 是一个类型别名,用于定义一个函数类型,该函数接受一个 React.ChangeEvent<HTMLInputElement> 参数,并且没有返回值 (void)

具体来说,React.ChangeEvent<HTMLInputElement> 是一个特定的类型,它表示一个事件对象,该事件对象是由 React 库定义的,并且专门用于表示输入元素的变化事件(比如 inputtextarea 等), 其中的 <HTMLInputElement> 表示这个事件对象是针对 HTML 中的 input 元素的变化

另外事件

除了以上两个 React 的事件,还有

  • React.KeyboardEvent<HTMLInputElement>:处理 <input> 元素的键盘事件.
  • React.FormEvent<HTMLFormElement>:处理 <form> 元素的表单提交事件.
  • React.FocusEvent<HTMLInputElement>:处理 <input> 元素的获取焦点和失去焦点事件.
  • React.ChangeEvent<HTMLSelectElement>:处理 <select> 元素的改变事件.
  • React.MouseEvent<HTMLAnchorElement>:处理 <a> 元素的鼠标事件.
  • React.ClipboardEvent<HTMLInputElement>:处理 <input> 元素的剪贴板事件.
  • React.WheelEvent<HTMLDivElement>:处理 <div> 元素的滚动鼠标滚轮事件.
  • React.TouchEvent<HTMLDivElement>:处理触摸事件,适用于任何 HTML 元素.
  • React.DragEvent<HTMLElement>:处理拖拽事件,适用于任何 HTML 元素.

基本类型标注

可以使用 TypeScript 中的基本类型,比如 string、number、boolean 等来标注 JSX 元素或组件的属性

interface Props {
  name: string;
  age: number;
  isStudent: boolean;
}

自定义类型标注

可以使用自定义的接口或类型来标注 JSX 元素或组件的属性

interface User {
  name: string;
  age: number;
}

interface Props {
  user: User;
}

类型断言

可以使用类型断言来告诉 TypeScript 某个表达式的类型,这在处理特定类型的 JSX 元素时非常有用

const element = <input value="hello" /> as HTMLInputElement;

泛型标注

可以使用泛型来标注组件的属性,以适应不同类型的数据
<T> 是一个泛型参数的占位符,可以用于表示任意类型

interface Props<T> {
  data: T;
}

// 另一种函数写法
//function MyComponent<T>(props: Props<T>) {

//}

const MyComponent = <T extends {}>(props: Props<T>) => {

}

实现 interface

方法形参实现

interface Person {
  name: string;
  age: number;
  sayHello: () => void;
}

function Greeting(props: Person) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You are {props.age} years old.</p>
    </div>
  );
}

传递属性给组件

const person: Person = {
  name: "Alice",
  age: 26,
  sayHello: () => {
    console.log("Hello!");
  }
};

Greeting(person);

interface也可以用作泛型标注

interface Container<T> {
  value: T;
}
// 组件
function MyComponent<T>(props: Container<T>) {
  return <div>{props.value}</div>;
}
// 将接口中的 T 转换为 string 类型
const container: Container<string> = {
  value: "Hello, World!"
};
// 使用组件
<MyComponent value={container.value} />;

定义CSS对象

const Container: React.CSSProperties = {
  color: 'red',
  fontSize: '16px',
  fontWeight: 'bold'
};

<document className={Container}>11111111</document>

文章来源:https://blog.csdn.net/Dongfang_project/article/details/135385662
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。