Как мне рендерить 1 из 3 SVG внутри компонента, используя условия в React? - PullRequest
Новая
       37

Как мне рендерить 1 из 3 SVG внутри компонента, используя условия в React?

0 голосов
/ 28 января 2020

Вот код, который у меня есть сейчас. Я не могу понять это. Попытка визуализировать иконку 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;

1 Ответ

0 голосов
/ 28 января 2020

На самом деле вы можете просто импортировать изображения в ваш компонент, и они будут указаны как значение src. 

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

Кроме того, нет необходимости в go 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 />;
  }
}
...