如何使用React中的条件在组件内部渲染3个SVG中的1个？

Question

这是我现在拥有的代码。我不知道这个。尝试根据道具渲染SVG图标。例如，将渲染一个房子图标

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;

Answer 1

您实际上可以将图像导入到组件中，然后将它们指定为src值。

import logo from "./lat-long.png";

此外，在对它们进行解构时，不需要深入两层。

此外，您应该检查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 />;
  }
}