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 />;
  }
};
相关推荐
啦啦右一几秒前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落5 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
霍格沃兹测试开发学社测试人社区29 分钟前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
理想不理想v33 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我34 分钟前
浏览器交互事件汇总
前端·交互
今天我又学废了1 小时前
Scala学习记录,List
学习
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
幸运超级加倍~1 小时前
软件设计师-上午题-16 算法(4-5分)
笔记·算法