前端 - 泛型嵌套`<PropsWithChildren<CreateFormProps>>` 是否指的是泛型：<PropsWithChildren> 实现了 接口：CreateFormProps?

Question

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

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?

Answer 1

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