reactjs React -在map循环中Map动态组件名称

s6fujrry 于 2023-04-11 发布在 React

关注(0)|答案(2)|浏览(191)

我是新的React，并试图创建一个菜单栏的排序。所有类似的问题似乎是旧的或不太是我需要的。无论如何，我不能得到这个工作，所以请帮助弄清楚这一点。
我正在使用react-icons，并希望动态命名组件，以便在此循环中使用图标，但〈{瓦尔.icon} /〉抛出错误：“'...' expected.”我能做些什么来使这个工作？我似乎也不能在return语句中声明变量来解决这个问题，或者至少我不知道如何做到这一点。有什么想法吗？

const values = [
    { id: 1, text: "Home", icon: "MdHomeFilled" },
    { id: 2, text: "Schedule", icon: "MdEditCalendar" },
    { id: 3, text: "Scores", icon: "MdSportsTennis" },
    { id: 4, text: "Stats", icon: "IoIosStats" }
    ];

return (
    <>
       
            <ul>

                {values.map((val) => (
                    <li onClick={() => setActiveId(val.id)}>
                        <div className={activeId === val.id ? "NavLinkBox selected":"NavLinkBox"}>
                            <div className="navLinkBoxHdr"><{val.icon} /></div>
                            <div className="navLinkBoxCnt">{val.text}</div>
                        </div>
                    </li>
                ))}
            </ul>

reactjs

来源：https://stackoverflow.com/questions/72834161/react-map-dynamic-component-name-within-map-loop

2条答案

按热度按时间

3z6pesqy1#

你不能仅仅使用一个组件名（比如string）来渲染一个组件。
为了呈现它，你需要像往常一样导入它，然后将它转换成一个大写的变量。例如：

import MdHomeFilled from './MdHomeFilled';
import MdEditCalendar from './MdEditCalendar';

export default function App() {
  const values = [
    { id: 1, text: "Home", icon: MdHomeFilled },
    { id: 2, text: "Schedule", icon: MdEditCalendar }
  ];

  return ( 
    <ul>
        {values.map((val) => {
          const IconComponent = val.icon; // This way you can use this field as a component
          return (
            <li key={val.id} onClick={() => setActiveId(val.id)}>
                <div className={activeId === val.id ? "NavLinkBox selected":"NavLinkBox"}>
                    <div className="navLinkBoxHdr"><IconComponent /></div>
                    <div className="navLinkBoxCnt">{val.text}</div>
                </div>
            </li>
          );
        })}
    </ul>
  );
}

赞(0）回复(0）举报 2023-04-11

brccelvz2#

这样使用它：

const socialArr = [
[
  "Linkedin",
  <TiSocialLinkedinCircular size={30} style={{ color: "grey" }} />,
],
["Github", <AiFillGithub size={25} style={{ color: "grey" }} />],
["Facebook", <BsFacebook size={24} style={{ color: "grey" }} />],
["Twitter", <AiFillTwitterCircle size={25} style={{ color: "grey" }} />],
["Instagram", <AiFillInstagram size={25} style={{ color: "grey" }} />],
["Website", <BsGlobe size={25} style={{ color: "grey" }} />],  ];

{socialArr.map(([name, icon]) => (
      <>
        <div className="web__bottom__tab">
          <h2>{name}</h2>
          <div className="web__input">
            {icon} // here is the icon that will be rendered
            <input type="text" placeholder={name} />
          </div>
        </div>
      </>
    ))}

赞(0）回复(0）举报 2023-04-11

我来回答

reactjs React -在map循环中Map动态组件名称

2条答案

相关问题

热门标签

最新问答