[英]How do I render 1 of 3 SVGs inside a component using conditions in React?
Here is the code that I have now.这是我现在拥有的代码。 I can't figure this out.
我想不通。 Trying to render an SVG icon based on the prop.
尝试根据道具呈现 SVG 图标。 For example would render a house icon
例如会渲染一个房子图标
import React from "react";
function BuildingIcon() {
return <img src="./building.svg" alt="building" />;
}
function HouseIcon() {
return <img src="./house.svg" alt="house" />;
}
function LatlongIcon() {
return <img src="./latlong.svg" alt="globe" />;
}
function Icon(props) {
const iconStyle = props.iconStyle;
switch (iconStyle) {
case "building":
return <BuildingIcon />;
case "house":
return <HouseIcon />;
case "latlong":
return <LatlongIcon />;
default:
return <HouseIcon />;
}
}
export default Icon;
You could actually just import the images into your component, and them specifying them as the src
value.您实际上可以将图像导入到您的组件中,然后它们将它们指定为
src
值。
import logo from "./lat-long.png";
In addition, there is no need to go 2 levels deep when you destructure them.此外,解构它们时无需深入 2 层。
In addition, you should check if iconStyle
is properly passed down to your component, and that props.iconStyle
is defined.此外,您应该检查
iconStyle
是否正确传递给您的组件,以及props.iconStyle
是否已定义。
import React from "react";
import logo from "./lat-long.png";
function BuildingIcon() {
return <img src={logo} alt="globe" />;
}
function HouseIcon() {
return <img width="24px" src={logo} alt="globe" />;
}
function LatlongIcon() {
return <img src={logo} alt="globe" />;
}
function Icon(props) {
const { iconStyle } = props;
switch (iconStyle) {
case "building":
return <BuildingIcon />;
case "house":
return <HouseIcon />;
case "latlong":
return <LatlongIcon />;
default:
return <HouseIcon />;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.