React中创建值为JSX组件的键值对对象遇语法错误求解决

你的代码存在语法和类型匹配问题，以下是问题分析和修正方案：

问题分析 #

1. 类型不兼容：ActiveTabType定义的是键值对对象类型，但你把TabsContent写成了函数，两者类型不匹配。
2. 函数语法错误：函数内部直接写键值对却没有返回语句，同时{(<AnnouncementTemplates services={services} />)}里的外层大括号是多余的，会被解析为代码块而非JSX元素。
3. 对象写法错误：函数内的键值对未包裹在对象大括号中，也没有通过return返回目标对象。

修正方案 #

如果需要根据传入的services动态生成包含JSX组件的对象，需定义返回ActiveTabType类型的函数：

type ActiveTabType = {
    [key: string]: JSX.Element;
};

// 定义接收services参数并返回目标对象的函数类型
type TabsContentFn = (services: any) => ActiveTabType;

export const TabsContent: TabsContentFn = (services) => {
    return {
        [SettingsTabNames.AnnouncementTemplates]: <AnnouncementTemplates services={services} />,
        [SettingsTabNames.AnnouncementCards]: <AnnouncementCards />
    };
};

如果不需要动态参数，直接创建静态对象即可：

type ActiveTabType = {
    [key: string]: JSX.Element;
};

export const TabsContent: ActiveTabType = {
    [SettingsTabNames.AnnouncementTemplates]: <AnnouncementTemplates />,
    [SettingsTabNames.AnnouncementCards]: <AnnouncementCards />
};

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