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