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 />;
  }
};