在 React 中使用变量渲染组件答案

【问题标题】：Rendering a component using a variable in React在 React 中使用变量渲染组件
【发布时间】：2021-04-25 04:58:57
【问题描述】：

我有一个react-icons 列表，通过“卡片组件”中的道具传递。在我的 Card 组件的渲染方法中，我有这样的东西：

render() {
  ...
  {
     this.props.icons.map(icon => {
        return (
          <div className="icon-square">
            /*   What should I do here so I render the "icon" variable"   */
          </div>
        )
     })
   }
}

注意：该列表由 react-icons 组成，它们本身就是 React 组件。

我尝试了很多东西，但我无法弄清楚如何渲染图标。如果有人可以帮助我，那就太棒了。谢谢

【问题讨论】：

你试过{icon}吗？
请包含 props.icons 数组是什么，以便我们可以看到您尝试渲染的每个元素是什么。包括您已经尝试过的内容，这样我们就不会玩 20 个问题。 Minimal, Complete, Reproducible Example
你试过icon()吗？
我会选择@NadiaChibrikova 的回答。当然如果 icon 是 JSX 元素。
啊，是的，icon(icon) 有效。谢谢

标签： javascript reactjs react-icons

【解决方案1】：

如果图标是一个react组件，那么：

this.props.icons.map(Icon => {
        return (
          <div className="icon-square">
            <Icon/>
          </div>
        )
     })

【讨论】：

【解决方案2】：

假设你已经传递了一个图标列表

import { FaBeer, FaBug, FaAnchor, FaCoffee } from 'react-icons/fa';

const icons = [FaBeer, FaBug, FaAnchor, FaCoffee];

ReactDOM.render(
    <CardComponent icons = {icons} />,
    document.querySelector('root')
};

CardComponent.js

class CardComponent extends React.Component{
...

render() {

  // Icon is a Component
  return (
    this.props.icons.map((Icon) => {
     return <Icon />
    });
  )

 }
}

【讨论】：

这个答案与@lissettdm 的答案非常相似
@Kurosaki_Ishigo 我的回答特别指出了我们应该将什么以及如何传递给 CardComponent 的道具。由于 Jam 是一个新的贡献者，所以我认为如果我能尽可能深入地解释他会更有帮助。有时像我这样的新程序员甚至难以理解 SOF 社区的答案。

【解决方案3】：

这里有两个使用你的图标的区别，如果你作为 JSX 传递你应该使用{icon} 但是如果你作为一个组件传递，你应该像这样使用<Icon/>

【讨论】：

是的，兄弟，你说的完全正确。我同意你的看法。这是我的错误。感谢您指出我的错误。

【解决方案4】：

我认为包装你只需要放图标是{}

render() {
  ...
  {
     this.props.icons.map(icon => {
        return (
          <div className="icon-square">
            {icon}
          </div>
        )
     })
   }
}

【讨论】：

我试过{icon}，但它不起作用。我检查了谷歌浏览器的检查，这就是我得到的，<div class="icon-square></div> icon-square div 里面什么都没有