在学习 React 时，我们总会遇到在 TS 和 JS 之间切换来开发多个项目，而有时会忘记 TS 的语法，所以编写一下 React 结合 TS 开发时的一些总结知识点，以便后续回顾用。
向组件传递基础参数（字符串、数字和布尔值）
这节主要是介绍一下在 React + TS 中如何实现组件传递基础类型的参数。具体实例如下：
type BasePropData = {
name: string;
age: number;
isGraduate: boolean;
};
const BaseProps: React.FC<BasePropData> = ({
name, age, isGraduate }) => {
return (
<div>
<h2>传递基础参数实例</h2>
<p>name: {
name}</p>
<p>age: {
age}</p>
<p>isGraduate： {
isGraduate ? "是" : "否"}</p>
</div>
);
};
export default BaseProps;
向组件传递对象参数（数组、对象和多值情况）
这节主要是介绍一下在 React + TS 中如何实现组件传递数组、对象和联合类型的的参数。具体实例如下：
type StudentProps = {
id: number;
name: string;
age: number;
};
type ObjectPropsData = {
students: StudentProps[];
classInfo: {
no: string;
name: string;
roomNo: string;
studentCount: number;
grade: "初一" | "初二" | "初三";
};
};
const ObjectProps: React.FC<ObjectPropsData> = (props) => {
return (
<div>
<h2>传递对象参数实例</h2>
<div>
<h4>班级信息</h4>
<hr />
<p>年级编号：{
props.classInfo.no}</p>
<p>年级名称：{
props.classInfo.name}</p>
<p>教室编号：{
props.classInfo.roomNo}</p>
<p>学生数量：{
props.classInfo.studentCount}</p>
<p>班级年级：{
props.classInfo.grade}</p>
</div>
<div>
<h4>学生姓名</h4>
<hr />
{
props.students.map((item) => (
<p>
姓名：{
item.name} 年龄：{
item.age}
</p>
))}
</div>
</div>
);
};
export default ObjectProps;
向组件传递 children 参数
这节主要是介绍一下在 React + TS 中如何实现组件传递 children 的参数。具体实例如下：
// children参数为字符串
type ChildrenPropsData = {
children: string;
};
const ChildrenStringProps: React.FC<ChildrenPropsData> = (props) => {
return (
<div>
<h2>组件传递 children 参数实例</h2>
<p>{
props.children}</p>
</div>
);
};
// children参数为React.Node
type ChildrenReactNodePropsData = {
children: React.ReactNode;
};
const ChildrenReactNodeProps: React.FC<ChildrenReactNodePropsData> = (
props
) => {
return (
<div>
<h2>组件传递 children 参数实例</h2>
{
props.children}
</div>
);
};
向组件传递事件和样式参数
这节主要是介绍一下在 React + TS 中如何实现组件传递事件和样式参数。具体实例如下：
-
事件参数实例
这里只是列举两个事件类型的传参实例，每个事件在 Ts 中的声明可以参考如下信息：
//
type EventPropsData = {
value: string;
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
getInputVal: (event: React.MouseEvent<HTMLButtonElement>, id: string) => void;
};
const EventProps: React.FC<EventPropsData> = ({
value,
handleChange,
getInputVal,
}) => {
return (
<div>
<h2>组件传递 事件 参数实例</h2>
<input type="text" value={
value} onChange={
handleChange} />
<button onClick={
(event) => getInputVal(event, value)}>Click</button>
</div>
);
};
export default EventProps;
- 样式参数实例
type StylePropsData = {
styles: React.CSSProperties;
};
const StyleProps: React.FC<StylePropsData> = ({
styles }) => {
return (
<div>
<h2>组件传递 样式 参数实例</h2>
<div style={
styles}>这里是传入的参数样式</div>
</div>
);
};
export default StyleProps;
向组件中传入组件参数
这节主要是回顾，组件传入的参数为组件时的 TS 写法。具体实例如下：
// Profile.tsx
export type ProfileProps = {
name: string;
};
export const Profile = ({
name }: ProfileProps) => {
return <div>Private Profile component. Name is {
name}</div>;
};
// Private.tsx
type PrivateProps = {
isLoggedIn: boolean;
Component: React.ComponentType<ProfileProps>; // 因为我们制定传入的组件需要带有一个name属性，所以我们这里采用了TS的泛型来定义组件的参数
};
export const Private = ({
isLoggedIn, Component }: PrivateProps) => {
if (isLoggedIn) {
return <Component name="Vishwas" />;
} else {
return <Login />;
}
};