在React中動態創建組件

Question

我正在使用react-icons，並且有一個JSON文件，如下所示：

social: {
  twitter: {
    icon: 'FaTwitter',
    link: 'twitterlink',
  },
  linkedin: {
    icon: 'FaLinkedIn',
    link: 'linkedinlink',
  },
  github: {
    icon: 'FaGithub',
    link: 'githublink',
  },
}

我正在嘗試通過遍歷JSON來動態創建圖標，但在使其正常工作時遇到了很多麻煩。

以下是到目前為止我已經嘗試過的內容以及控制台中產生的輸出和錯誤的摘要：

---

反應圖標導入

import * as FontAwesome from 'react-icons/lib/fa';

---

1

{Object.keys(social).map(key => {
  let IconName = Component['FontAwesome.' + social[key].icon];

  return (
    <li key={key}>
      <a href={social[key].link} target="_blank" rel="noopener">
        <IconName size="15" />
      </a>
    </li>
  );
})}

警告：React.createElement：類型無效-預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記了從定義文件中導出組件，或者可能混淆了默認導入和命名導入。

未捕獲的錯誤：元素類型無效：預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記了從定義文件中導出組件，或者可能混淆了默認導入和命名導入。

無輸出

---

2

{Object.keys(social).map(key => {
  let IconName = FontAwesome`.${social[key].icon}`;

  return (
    <li key={key}>
      <a href={social[key].link} target="_blank" rel="noopener">
        <IconName size="15" />
        {/* This line produces the same result */}
        {/* {React.createElement(IconName, { size: '15' })} */}
      </a>
    </li>
  );
})}

未捕獲的TypeError： __WEBPACK_IMPORTED_MODULE_1_react_icons_lib_fa__不是函數

無輸出

---

3

{Object.keys(social).map(key => {
  let IconName = `FontAwesome.${social[key].icon}`;

  return (
    <li key={key}>
      <a href={social[key].link} target="_blank" rel="noopener">
        <IconName size="15" />
      </a>
    </li>
  );
})}

警告： <FontAwesome.FaTwitter />正在使用大寫HTML。 在React中始終使用小寫的HTML標簽。

警告：此瀏覽器無法識別標簽<FontAwesome.FaTwitter> 。 如果要渲染React組件，請以大寫字母開頭。

除了FaLinkedIn和FaGithub ，還有更多錯誤。

在React開發工具中輸出

<li>
  <a href="twitterlink" target="_blank" rel="noopener">
    <Fontawesome.FaTwitter size="15"></Fontawesome.FaTwitter>
  </a>
</li>

HTML輸出

<li>
  <a href="twitterlink" target="_blank" rel="noopener">
    <fontawesome.fatwitter size="15"></fontawesome.fatwitter>
  </a>
</li>

---

我想要的是這樣的：

<FontAwesome.FaTwitter size="15" />

在React開發工具中輸出

<FaTwitter size="15">
  <IconBase viewBox="0 0 40 40" size="15">
    <svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="15" width="15" viewBox="0 0 40 40" style="vertical-align: middle;">
      <g>
        <path d="m37.7 9.1q-1.5 2.2-3.7 3.7 0.1 0.3 0.1 1 0 2.9-0.9 5.8t-2.6 5.5-4.1 4.7-5.7 3.3-7.2 1.2q-6.1 0-11.1-3.3 0.8 0.1 1.7 0.1 5 0 9-3-2.4-0.1-4.2-1.5t-2.6-3.5q0.8 0.1 1.4 0.1 1 0 1.9-0.3-2.5-0.5-4.1-2.5t-1.7-4.6v0q1.5 0.8 3.3 0.9-1.5-1-2.4-2.6t-0.8-3.4q0-2 0.9-3.7 2.7 3.4 6.6 5.4t8.3 2.2q-0.2-0.9-0.2-1.7 0-3 2.1-5.1t5.1-2.1q3.2 0 5.3 2.3 2.4-0.5 4.6-1.7-0.8 2.5-3.2 3.9 2.1-0.2 4.2-1.1z">
        </path>
      </g>
    </svg>
  </IconBase>
</FaTwitter>

HTML輸出

<svg fill="currentColor" preserveAspectRatio="xMidYMid meet" height="15" width="15" viewBox="0 0 40 40" style="vertical-align: middle;">
  <g>
    <path d="m37.7 9.1q-1.5 2.2-3.7 3.7 0.1 0.3 0.1 1 0 2.9-0.9 5.8t-2.6 5.5-4.1 4.7-5.7 3.3-7.2 1.2q-6.1 0-11.1-3.3 0.8 0.1 1.7 0.1 5 0 9-3-2.4-0.1-4.2-1.5t-2.6-3.5q0.8 0.1 1.4 0.1 1 0 1.9-0.3-2.5-0.5-4.1-2.5t-1.7-4.6v0q1.5 0.8 3.3 0.9-1.5-1-2.4-2.6t-0.8-3.4q0-2 0.9-3.7 2.7 3.4 6.6 5.4t8.3 2.2q-0.2-0.9-0.2-1.7 0-3 2.1-5.1t5.1-2.1q3.2 0 5.3 2.3 2.4-0.5 4.6-1.7-0.8 2.5-3.2 3.9 2.1-0.2 4.2-1.1z">
    </path>
  </g>
</svg>

我想做的事可能嗎？ 有任何解決方法或其他方法嗎？

有類似的問題是StackOverflow，但似乎沒有一個對我有用，這就是為什么我要一個新的問題。 我也嘗試過搜索錯誤，但也沒有運氣。

• React / JSX動態組件名稱
• React / JSX動態組件名稱
• React JSX：遍歷哈希並為每個鍵返回JSX元素
• JSX中來自字符串的動態標簽名稱
• 動態創建的React組件即使大寫也可以呈現為HTML

Answer 1

在給定react-icons名稱的情況下，以下是動態創建react-icons的方法：

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>
  );
};

一旦有了這個圖標包裝器，就可以將其用作常規的React組件：
<Icon iconName={"FaBeer"} size={12} color="orange" />
圖標名稱應遵循MixedCaps命名轉換。

此鏈接是上面代碼的codesandbox演示： https ://codesandbox.io/s/o715x22m4z