Реагировать на импорт SVG из URL

Question

Я работаю над проблемой, когда изображение SVG необходимо загрузить из URL (AWS S3) в реагирующий компонент.Я могу успешно показать и загрузить изображение, используя SVG-встроенный компонент реакции из локального файла.Тем не менее, файлы svg должны быть загружены в строке из корзины S3, импорт JS svg не работает с URL-адресами.

Итак, я пытаюсь найти лучшее альтернативное решение для этого?

Answer 1

@ ivnkld answer указал мне правильное направление, спасибо!А для таких гуглеров, как я, есть реализация того же подхода с хуками:

import React, { useEffect, useState } from 'react';

const SvgInline = props => {
    const [svg, setSvg] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [isErrored, setIsErrored] = useState(false);

    useEffect(() => {
        fetch(props.url)
            .then(res => res.text())
            .then(setSvg)
            .catch(setIsErrored)
            .then(() => setIsLoaded(true))
    }, [props.url]);

    return (
        <div 
            className={`svgInline svgInline--${isLoaded ? 'loaded' : 'loading'} ${isErrored ? 'svgInline--errored' : ''}`}
            dangerouslySetInnerHTML={{ __html: svg }}
        />
    );
}

Answer 2

Вы должны получить изображение SVG и вставить его в HTML

const SVG_URL = url = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg';

class Svg extends React.Component {
  state = {
    svg: null,
    loading: false,
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.text())
      .then(text => this.setState({ svg: text }));
  }

  render() {
    const { loading, svg } = this.state;
    if (loading) {
      return <div className="spinner"/>;
    } else if(!svg) {
      return <div className="error"/>
    }
    return <div dangerouslySetInnerHTML={{ __html: this.state.svg}}/>;
  }
}

ReactDOM.render(
  <Svg url='https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg' />,
  document.querySelector("#app")
);

, вы можете отредактировать пример здесь https://jsfiddle.net/anu6x3bk/

React не рекомендует использовать dangerouslySetInnerHTML, поэтому вы должны использовать некоторыепакет типа svg-inline-react