如何根据会议类型从给定对象中渲染对应的React图标？

你已经通过colors对象关联了会议类型与背景色、React图标组件，要渲染对应图标可以这么做：

步骤1：获取对应图标组件 #

从colors对象中根据会议类型取出对应的图标组件（注意React组件必须以大写字母开头，你的colors里的图标已经符合要求）：

// 拿到当前会议类型对应的配置项
const meetingConfig = colors[eventData.meetingType];
// 取出图标组件
const IconComponent = meetingConfig?.[1];

步骤2：渲染图标组件 #

在JSX中直接使用这个组件即可，和使用普通React组件的方式一致：

<div className="text-sm">
  {/* 加个判断避免会议类型不存在时报错 */}
  {IconComponent && <IconComponent />}
</div>

完整整合示例 #

把背景色和图标渲染逻辑放在一起：

const colors = {
  Meeting: ["#D09FE8", GrGroup],
  "1on1": ["#86DB43", MdLocalLibrary],
  Review: ["#B22F5E", MdRateReview],
  "Team Collaboration": ["#B22F5E", RiStackshareFill],
  "Feature Review": ["#B22F5E", MdFeaturedPlayList],
};

// 组件内部逻辑
const meetingConfig = colors[eventData.meetingType];
const style = {
  background: meetingConfig?.[0] || "#默认背景色", // 加默认值防止报错
};
const IconComponent = meetingConfig?.[1];

return (
  <div style={style}>
    <div className="text-sm">
      {IconComponent && <IconComponent />}
    </div>
  </div>
);

额外提示 #

• 要保证eventData.meetingType的值和colors对象的键完全匹配（包括大小写、空格）
• 如果图标需要自定义尺寸、颜色等属性，直接在渲染时传递即可：<IconComponent size={20} color="#ffffff" />

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