泛型嵌套`<PropsWithChildren<CreateFormProps>>` 是否指的是泛型:<PropsWithChildren> 实现了 接口:CreateFormProps?

作者站长头像
站长
· 阅读数 14

这里有一个示例代码,没有看明白,

import { Modal } from 'antd';
import React, { PropsWithChildren } from 'react';

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
}

const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
  const { modalVisible, onCancel } = props;

  return (
    <Modal
      destroyOnClose
      title="新建"
      width={420}
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      {props.children}
    </Modal>
  );
};

export default CreateForm;

1、请问下,泛型嵌套<PropsWithChildren<CreateFormProps>>,这里的<CreateFormProps> 是一个interface,可以是type吗?

2、<PropsWithChildren<CreateFormProps>> 代表什么意思呢?是否代表泛型:<PropsWithChildren> 实现了接口interface CreateFormProps?

回复
1个回答
avatar
test
2024-07-04

1、可以2、泛型的概念你可以类比于函数参数,当我定义一个interface Test<T>就好比定义了一个函数function Test(T),这里的T只是一个占位符,实际是什么类型根据你使用时传入来决定,通过类比函数就好理解React.FC<PropsWithChildren<CreateFormProps>>,这里就好似是函数嵌套,PropsWithChildren支持传入一个泛型即CreateFormProps,而React.FC也支持传入一个泛型即PropsWithChildren<CreateFormProps>这个整体

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容