在 React 中使用变量渲染组件

Question

我有一个 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 组件。

我尝试了很多东西，但我不太明白如何渲染图标。如果有人可以帮助我，那就太棒了。谢谢

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

假设您传递了一个图标列表，例如

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

 }
}

在 React 中使用变量渲染组件

Rendering a component using a variable in React

javascript

reactjs

react-icons