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

在学习 React 时,我们总会遇到在 TS 和 JS 之间切换来开发多个项目,而有时会忘记 TS 的语法,所以编写一下 React 结合 TS 开发时的一些总结知识点,以便后续回顾用。

向组件传递基础参数(字符串、数字和布尔值)

这节主要是介绍一下在 React + TS 中如何实现组件传递基础类型的参数。具体实例如下:

typescript 复制代码
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 中如何实现组件传递数组、对象和联合类型的的参数。具体实例如下:

typescript 复制代码
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 的参数。具体实例如下:

typescript 复制代码
// 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 中的声明可以参考如下信息:

typescript 复制代码
//
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;
  • 样式参数实例
typescript 复制代码
type StylePropsData = {
  styles: React.CSSProperties;
};

const StyleProps: React.FC<StylePropsData> = ({ styles }) => {
  return (
    <div>
      <h2>组件传递 样式 参数实例</h2>
      <div style={styles}>这里是传入的参数样式</div>
    </div>
  );
};

export default StyleProps;

向组件中传入组件参数

这节主要是回顾,组件传入的参数为组件时的 TS 写法。具体实例如下:

typescript 复制代码
// 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 />;
  }
};
相关推荐
心怀梦想的咸鱼19 分钟前
UE5 第一人称射击项目学习(四)
学习·ue5
AI完全体22 分钟前
【AI日记】24.11.22 学习谷歌数据分析初级课程-第2/3课
学习·数据分析
旧林84326 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq38 分钟前
c#使用高版本8.0步骤
java·前端·c#
rellvera1 小时前
【强化学习的数学原理】第02课-贝尔曼公式-笔记
笔记·机器学习
Mephisto.java1 小时前
【大数据学习 | Spark-Core】Spark提交及运行流程
大数据·学习·spark
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js