如何在reactjs中循环设置react-icons答案

【问题标题】：how to set react-icons in loop in reactjs如何在reactjs中循环设置react-icons
【发布时间】：2022-01-14 12:12:48
【问题描述】：

大家好，我的代码在这里遇到了麻烦

我只想在我的项目中使用 react 图标而不做其他事情

我只是在每个正在渲染的数据中显示图标

像这样{<${e.contact.icons}/>}我在代码中所做的事情

import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa";

// here is data for I want to show

const data = [
  {
    contact: [
      {
        title: "contact",
        subtitle: "get in touch",
icons:"FaBeer",

      },
{
        title: "contact",
        subtitle: "get in touch",
icons:"Fa500Px",
      },
{
        title: "contact",
        subtitle: "get in touch",
icons:"FaAccusoft",
      },
    ],
  },
];



const contact = () => {
  return (
    <>
      {data.map((e, i) => {
        return (
          <>
            <div className="text-area">
              <h1 className="title">{e.contact.title}</h1>
              <h2 className="subtitle">{e.contact.subtitle}</h2>
              <span>     {`<${e.contact.icons}/>`} </span>
            </div>
          </>
        );
      })}
    </>
  );
};

export default contact;

{<${e.contact.icons}/>}这种类型的方法不起作用它在浏览器中返回像这样的外部

<FaBeer/>
<Fa500Px/>
<FaAccusoft/>

这里的图标没有显示我应该怎么做

【问题讨论】：

标签： javascript reactjs react-icons

【解决方案1】：

您还可以使用 html-react-parser 中的 Parser()。 https://github.com/remarkablemark/html-react-parser

const parse = require('html-react-parser');
{parse(`<${e.contact.icons}/>`)};

【讨论】：

你添加了吗 - 从 "react-icons/fa" 导入 { FaBeer, Fa500Px, FaAccusoft };在你的文件中
还没有显示有用的图标
是的，我做所有我需要的事情，还有import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa"; 这就是你所说的
是的，让我为你创建codesandbox.io，给点时间
这里是[链接]codesandbox.io/s/bold-galileo-bex98?file=/src/App.js@Santosh Karanam

【解决方案2】：

https://codesandbox.io/s/fervent-goldwasser-y83cn?file=/src/App.js

import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa";

// here is data for I want to show

const data = [
  {
    contact: [
      {
        title: "contact",
        subtitle: "get in touch",
        icons: FaBeer
      },
      {
        title: "contact",
        subtitle: "get in touch",
        icons: Fa500Px
      },
      {
        title: "contact",
        subtitle: "get in touch",
        icons: FaAccusoft
      }
    ]
  }
];

const contact = () => {
  return (
    <>
      {data.map((e, i) => {
        return (
          <>
            {e.contact.map((e, i) => {
              return (
                <div className="text-area" key={i}>
                  <h1 className="title">{e.title}</h1>
                  <h2 className="subtitle">{e.subtitle}</h2>
                  <span>
                    <e.icons />
                  </span>
                </div>
              );
            })}
          </>
        );
      })}
    </>
  );
};

export default contact;

【讨论】：

o 兄弟 thx 你不知道你在做什么 thx 帮助很大

【解决方案3】：

您不能使用字符串来表示 React 组件类型，而是可以使用导入的 ComponentType 本身。

import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa";

// here is data for I want to show

const data = [
  {
    contact: [
      {
        title: "contact",
        subtitle: "get in touch",
        icons: FaBeer,
      },
      {
        title: "contact",
        subtitle: "get in touch",
        icons: Fa500Px,
      },
      {
        title: "contact",
        subtitle: "get in touch",
        icons: FaAccusoft,
      },
    ],
  },
];

const Contact = () => {
  return (
    <>
      {data.map((e, i) => {
        const Icon = e.contact.icons;
        return (
          <>
            <div className="text-area">
              <h1 className="title">{e.contact.title}</h1>
              <h2 className="subtitle">{e.contact.subtitle}</h2>
              <span><Icon /></span>
            </div>
          </>
        );
      })}
    </>
  );
};

export default Contact;

注意Icon 的渲染也发生了变化

【讨论】：

我知道，但我这样做只是为了表达我想说的:)
@SanskarSahu 不明白你的意思

【解决方案4】：

我已经得到了这种方法并且我设法做我想做的事

import React from "react";
import { render } from "react-dom";
import * as FontAwesome from "react-icons/lib/fa";

const Icon = props => {
  const { iconName, size, color } = props;
  const icon = React.createElement(FontAwesome[iconName]);
  return <div style={{ fontSize: size, color: color }}>{icon}</div>;
};

const App = () => {
  const iconString = "FaBeer";
  const beer = React.createElement(FontAwesome[iconString]);
  return (
    <div>
      <h2>Start editing to see some magic happen {"\u2728"}</h2>
      <FontAwesome.FaBeer />
      <div style={{ fontSize: 24, color: "orange" }}>{beer}</div>
      <Icon iconName={"FaBeer"} size={12} color="orange" />
    </div>
  );
};


----------


render(<App />, document.getElementById("root"));

https://codesandbox.io/s/o715x22m4z?file=/src/index.js:0-737`enter 代码在这里`

感谢〈Evie.Codes〉。

【讨论】：