[英]Rendering a component using a variable in React
I have a list of react-icons
passed through props in a "Card Component".我有一个通过“卡片组件”中的道具传递的react-icons
列表。 In my Card component's render method, I have something like this:在我的 Card 组件的渲染方法中,我有这样的东西:
render() {
...
{
this.props.icons.map(icon => {
return (
<div className="icon-square">
/* What should I do here so I render the "icon" variable" */
</div>
)
})
}
}
Note: The list consists of react-icons which are React components themselves.注意:该列表由 react-icons 组成,它们本身就是 React 组件。
I tried a lot of things, but I can't quite figure out how I can render the icon.我尝试了很多东西,但我不太清楚如何渲染图标。 It would be awesome if someone could help me.如果有人可以帮助我,那就太棒了。 Thank you谢谢
If the icon is a react component, then:如果图标是一个反应组件,那么:
this.props.icons.map(Icon => {
return (
<div className="icon-square">
<Icon/>
</div>
)
})
Let say you've passed a list of an icon like假设您已经通过了一个图标列表,例如
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 CardComponent.js
class CardComponent extends React.Component{
...
render() {
// Icon is a Component
return (
this.props.icons.map((Icon) => {
return <Icon />
});
)
}
}
Here is two difference for use your icon, If you pass as a JSX you should use {icon}
But if you pass as a component you should use like this <Icon/>
这是使用图标的两个区别,如果你作为 JSX 传递,你应该使用{icon}
但如果你作为组件传递,你应该像这样使用<Icon/>
I think wrapping you need to just put icon is {}
我认为包装你只需要放图标是{}
render() {
...
{
this.props.icons.map(icon => {
return (
<div className="icon-square">
{icon}
</div>
)
})
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.