javascript 如何在react js中使用map更改标签名称

bfrts1fy 于 2023-03-21 发布在 Java

关注(0)|答案(1)|浏览(137)

我有一个这样的代码，我想改变标签名称开始〈所有。

{services.map((item) => (
        <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          <All.${item}
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
      ))}

我试过这样

{services.map((item) => (
        <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          {(`{<All.${item}
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />`)}
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
      ))}

但它不工作它显示

JavaScript

来源：https://stackoverflow.com/questions/75784233/how-to-change-tag-name-in-react-js-with-map

1条答案

按热度按时间

py49o6xq1#

JSX不是字符串，不能使用${}

{
  services.map((item) => {
    const Component = All[item];
    return (
      <div className="space-x-[8px] py-[8px] flex ">
        <div className="flex flex-col text-center relative px-[8px] py-[8px] items-center active:bg-[#f5f5f5]  cursor-pointer">
          <Component
            sx={{ fontSize: "40px" }}
            className="text-[#6B84DD] w-[64px] h-[p64x] text-3xl"
          />
          <span className=" font-merrisans text-[14px] font-semibold">
            {item}
          </span>
        </div>
      </div>
    );
  });
}

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 如何在react js中使用map更改标签名称

1条答案

相关问题

热门标签

最新问答