如何使用 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";

此外，解构它们时无需深入 2 层。

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