如何将React元素推入数组？MUI图标渲染为字符串问题求助

问题根源 #

你将图标名称拼接成字符串（<${capitalize} />）进行渲染，React不会把这类字符串解析为组件，所以页面只会显示纯文本内容。

修正步骤 #

• 建立图标映射关系：把导入的MUI图标组件和对应的名称做键值对映射，方便通过名称直接获取组件。
• 直接渲染组件实例：遍历reactions时，从映射表中取出对应组件，以React元素的方式渲染，而非字符串。

修改后的完整代码 #

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addReaction } from "../features/postsSlice";

import ThumbsUp from "@mui/icons-material/ThumbUp";
import Happy from "@mui/icons-material/SentimentSatisfiedAlt";
import Sad from "@mui/icons-material/SentimentVeryDissatisfied";
import Heart from "@mui/icons-material/Favorite";
import Coffee from "@mui/icons-material/LocalCafe";
import { IconButton } from "@mui/material";

// 图标名称与组件的映射表
const IconMap = {
  ThumbsUp,
  Happy,
  Sad,
  Heart,
  Coffee
};

const Reactions = () => {
  const reactions = useSelector((state) =>
    Object.keys(state.posts[1].reactions)
  );
  
  const emojis = reactions.map((reaction) => {
    const capitalize = reaction[0].toUpperCase() + reaction.slice(1);
    // 获取对应的图标组件
    const IconComponent = IconMap[capitalize];
    // 渲染组件而非字符串，同时添加key属性避免React警告
    return (
      <IconButton key={reaction}>
        <IconComponent />
      </IconButton>
    );
  });
  
  return emojis;
};

export default Reactions;

额外说明 #

• 确保映射表的键值与capitalize处理后的名称完全一致，否则会找不到对应组件。
• 给列表项添加key属性是React列表渲染的规范要求，可避免控制台警告。

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