React 与 TS 结合使用时组件传参总结

在学习 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 />;}
};