[英]I'm rendering 5 columns from a single parent component and they all have different icons. How do i conditionally render them in react?
I've made a parent component and will be reusing the component times.我已经制作了一个父组件,并将重复使用组件时间。 So, I have 5 different icons in them and they all are taken from hero icons.所以,我有 5 个不同的图标,它们都取自英雄图标。 i've made an object having different ids for each child component but don't know how to render the icons.我制作了一个 object,每个子组件都有不同的 ID,但不知道如何呈现图标。 The icons seem to have rather large syntax and are HTML only.这些图标似乎有相当大的语法,只有 HTML。 Is is possible to put them inside object and call them as properties?是否可以将它们放在 object 中并将它们称为属性? The svg tag is where the icons are supposed to be fit in. This is one of them. svg 标签是应该放置图标的地方。这是其中之一。
<div className="flex flex-col bg-stone-100">
<div className="flex flex-row flex-shrink-0 flex-grow-0 relative mt-2 mr-7 mb-7 ml-4">
<span className="h-1 w-1 mr-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
height={18}
width={18}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
/>
</svg>
</span>
Good idea would be to create component for this purpose - it will make your code cleaner.好主意是为此目的创建组件——这将使您的代码更清晰。 You could create something like this:你可以创建这样的东西:
const SvgIcon = ({ width, height, iconUrl, iconFill }) => (
<span className="h-1 w-1 mr-4">
<svg
xmlns={iconUrl}
fill={iconFill}
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
height={width}
width={height}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
/>
</svg>
</span>
);
export default SvgIcon;
Of course you can adapt the props to match your needs.当然,您可以调整道具以满足您的需要。 After that you could just call SvgIcon wherever you need:之后,您可以在任何需要的地方调用 SvgIcon:
<SvgIcon
width={18}
height={18}
iconFill="none"
iconUrl="http://www.w3.org/2000/svg"
/>
This MDN user guide may be of some use.这个MDN 用户指南可能会有一些用处。 NOTE : not a one-line solution, but fewer than you had: :)注意:不是单线解决方案,但比您拥有的要少::)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.