Hai semuanya saya dalam masalah di sini kode saya

Saya hanya ingin menggunakan ikon reaksi di proyek saya tanpa melakukan hal lain

Saya hanya menunjukkan ikon di setiap data yang sedang dirender

Seperti ini {<${e.contact.icons}/>} apa yang saya lakukan dalam kode

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}/>} metode jenis ini tidak berfungsi, hasilnya seperti ini di browser

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

Di sini ikon tidak ditampilkan, lakukan yang harus saya lakukan

1
Sanskar Sahu 14 Januari 2022, 15:12

4 jawaban

Anda juga dapat menggunakan Parser() dari html-react-parser. https://github.com/remarkablemark/html-react-parser

const parse = require('html-react-parser');
{parse(`<${e.contact.icons}/>`)};
1
Santosh Karanam 14 Januari 2022, 15:20
Apakah Anda menambahkan - impor { FaBeer, Fa500Px, FaAccusoft } dari "react-icons/fa"; di file Anda
 – 
Santosh Karanam
14 Januari 2022, 15:49
Tidak ada ikon yang berguna yang belum muncul
 – 
Sanskar Sahu
14 Januari 2022, 15:49
Ya saya melakukan semua hal yang saya butuhkan dan juga import { FaBeer, Fa500Px, FaAccusoft } from "react-icons/fa"; ini yang Anda katakan
 – 
Sanskar Sahu
14 Januari 2022, 15:50
Ya, izinkan saya membuat codesandbox.io untuk Anda, beri waktu
 – 
Santosh Karanam
14 Januari 2022, 16:01
 – 
Sanskar Sahu
14 Januari 2022, 16:09

Anda tidak dapat menggunakan string untuk mewakili React Component Types, sebagai gantinya Anda dapat menggunakan ComponentType yang diimpor itu sendiri.

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;

Perhatikan bagaimana rendering Icon berubah juga

0
Agney 14 Januari 2022, 15:16
Saya tahu tetapi saya melakukan ini hanya untuk menunjukkan apa yang ingin saya katakan :)
 – 
Sanskar Sahu
14 Januari 2022, 15:27
Tidak yakin apa yang kamu maksud
 – 
Agney
14 Januari 2022, 15:52

Saya telah mendapatkan metode jenis ini dan saya berhasil melakukan apa yang saya inginkan

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`masukkan kode di sini`

Terima kasih kepada Evie.Codes〉.

0
Sanskar Sahu 15 Januari 2022, 09:20

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;

0
Sojib 15 Januari 2022, 09:54