如何将InterfaceProperties接口属性作为参数传入函数式组件

要把InterfaceProperties中的属性传入InterfaceDetailMessages组件，分两种场景处理：

1. 静态数据源场景 #

如果属性值是固定的，先定义一个符合InterfaceProperties类型的变量，再直接在Map中引用它的属性：

interface InterfaceProperties {
  interfaceProperty1Id: number,
  interfaceProperty1Name : string
}

// 定义符合类型的数据源
const interfaceProps: InterfaceProperties = {
  interfaceProperty1Id: 1001,
  interfaceProperty1Name: "用户详情"
};

const tabsInterfaces: Map<InterfaceDetailEnum, JSX.Element> = new Map([
  // 直接传入属性值
  [InterfaceDetailEnum.Detail, <InterfaceDetailMessages id={interfaceProps.interfaceProperty1Id} name={interfaceProps.interfaceProperty1Name} />],
  [InterfaceDetailEnum.Type, <></>],
  [InterfaceDetailEnum.Both, <></>]
]);

2. 动态数据源场景 #

如果属性值是动态获取的（比如从接口请求、父组件传参），可以把创建Map的逻辑封装成函数，接收InterfaceProperties类型的参数：

interface InterfaceProperties {
  interfaceProperty1Id: number,
  interfaceProperty1Name : string
}

// 封装成函数，动态接收props
const createTabsInterfaces = (props: InterfaceProperties): Map<InterfaceDetailEnum, JSX.Element> => {
  return new Map([
    [InterfaceDetailEnum.Detail, <InterfaceDetailMessages id={props.interfaceProperty1Id} name={props.interfaceProperty1Name} />],
    [InterfaceDetailEnum.Type, <></>],
    [InterfaceDetailEnum.Both, <></>]
  ]);
};

// 使用时传入动态获取的props
const fetchedProps: InterfaceProperties = {
  interfaceProperty1Id: await fetchId(), // 假设这是异步获取的ID
  interfaceProperty1Name: await fetchName()
};
const tabsInterfaces = createTabsInterfaces(fetchedProps);

内容的提问来源于stack exchange，提问作者Earth