ReactJs 中使用 TSX
组件事件
Click实现
Button 组件
js
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 组件的父组件
js
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 组件
js
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 组件的父组件
js
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库定义的，并且专门用于表示输入元素的变化事件（比如input、textarea等）, 其中的<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元素或组件的属性
js
interface Props {
name: string;
age: number;
isStudent: boolean;
}自定义类型标注
可以使用自定义的接口或类型来标注
JSX元素或组件的属性
js
interface User {
name: string;
age: number;
}
interface Props {
user: User;
}类型断言
可以使用类型断言来告诉
TypeScript某个表达式的类型，这在处理特定类型的JSX元素时非常有用
js
const element = <input value="hello" /> as HTMLInputElement;泛型标注
可以使用泛型来标注组件的属性，以适应不同类型的数据
<T>是一个泛型参数的占位符，可以用于表示任意类型
js
interface Props<T> {
data: T;
}
// 另一种函数写法
//function MyComponent<T>(props: Props<T>) {
//}
const MyComponent = <T extends {}>(props: Props<T>) => {
}实现 interface
方法形参实现
js
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>
);
}传递属性给组件
js
const person: Person = {
name: "Alice",
age: 26,
sayHello: () => {
console.log("Hello!");
}
};
Greeting(person);interface也可以用作泛型标注
js
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对象
js
const Container: React.CSSProperties = {
color: 'red',
fontSize: '16px',
fontWeight: 'bold'
};
<document className={Container}>11111111</document>