Реагировать SVG компонент рендеринга динамически - PullRequest
Новая
       12

Реагировать SVG компонент рендеринга динамически

1 голос
/ 02 ноября 2019

Я создаю локальное приложение погоды в React через приложение Create React, и мне нужно динамически отображать значок погоды в зависимости от типа погоды. У меня есть этот код: 

import React from 'react';

import { ReactComponent as MistIcon } from 'assets/img/weather/mist.svg';
import { ReactComponent as RainIcon } from 'assets/img/weather/rain.svg';
import { ReactComponent as SnowIcon } from 'assets/img/weather/snow.svg';

const icon = (props) => {

    const { weatherType } = props;

    const WeatherIconName = `${weatherType}Icon`; //Rain or Snow or Mist etc


    return(

        <Icon size={'lg'}>
            <WeatherIconName/> //here I'm trying to render <MistIcon/> or <SnowIcon/> or <RainIcon/>
        </Icon>

    );

};

export default icon;

И он просто выдает ошибку вроде этого: Предупреждение: тег не распознается в этом браузере. Если вы намеревались визуализировать компонент React, начните его имя с заглавной буквы.

Но если я назову его явно, вот так, он будет работать и отобразит правильный значок: 

return(

  <Icon size={'lg'}>
     <MistIcon/>
  </Icon>

);

Помогите мне, пожалуйста, улучшить мой код, чтобы динамически отображать иконки, если это возможно. Извините, если вопрос - тупой, я новичок в React.

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

Если у вас много типов погоды, вы можете создать новый компонент для их обработки.
( Пример кода )

index.js 

import React from "react";
import ReactDOM from "react-dom";
import WeatherIcon from "./icon";

function App() {

  const weatherType = 'sunny'; // props hardcoded, change to 'rainy'

  return (
    <div>
      <WeatherIcon name={weatherType} />
    </div>
  );
}

icon.js 

import React from "react";
import { ReactComponent as Rainy } from "./rainy.svg";
import { ReactComponent as Sunny } from "./sunny.svg";

const iconTypes = {
  rainy: Rainy,
  sunny: Sunny
};

const IconComponent = ({ name, ...props }) => {
  let Icon = iconTypes[name];
  return <Icon {...props} />;
};

export default IconComponent;

В вашем случае вы бы в конечном итоге использовали 

return(

  <Icon size={'lg'}>
     <WeatherIcon name={weatherType} />
  </Icon>

);
1 голос
/ 02 ноября 2019

Попробуйте использовать простой объект в качестве словаря для сопоставления weatherType с определенной иконкой: 

const ICONS_WEATHER = {
  Mist: <MistIcon />,
  Rain: <RainIcon />,
  Snow: <SnowIcon />
};

const icon = props => {
  const { weatherType } = props;

  return <Icon size={'lg'}>{ICONS[weatherType] || <DefaultIcon />}</Icon>;
};

export default icon;
...