When learning React, we always encounter the problem of switching between TS and JS to develop multiple projects, and sometimes forget the syntax of TS, so I will write down some summary knowledge points when developing React combined with TS for subsequent review.
Pass basic parameters (strings, numbers, and booleans) to components
This section mainly introduces how to implement components to pass basic type parameters in React + TS. Specific examples are as follows:
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;
Pass object parameters (arrays, objects and multi-valued cases) to components
This section mainly introduces how to implement components to pass array, object and union type parameters in React + TS. Specific examples are as follows:
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;
Pass the children parameter to the component
This section mainly introduces how to implement components to pass children parameters in React + TS. Specific examples are as follows:
// 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>
);
};
Pass event and style parameters to components
This section mainly introduces how to implement component passing events and style parameters in React + TS. Specific examples are as follows:
-
Event parameter example
Here are just two examples of parameter passing of event types. The declaration of each event in Ts can refer to the following information:
//
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;
- Style parameter example
type StylePropsData = {
styles: React.CSSProperties;
};
const StyleProps: React.FC<StylePropsData> = ({
styles }) => {
return (
<div>
<h2>组件传递 样式 参数实例</h2>
<div style={
styles}>这里是传入的参数样式</div>
</div>
);
};
export default StyleProps;
Pass component parameters to the component
This section mainly reviews the TS writing method when the parameters passed in by the component are components. Specific examples are as follows:
// 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 />;
}
};