我正在解决一个问题,其中 SVG 图像需要从 URL(AWS S3)加载到反应组件。我能够使用本地文件中的 SVG 内联反应组件成功显示和加载图像。但是,svg 文件需要从 S3 存储桶内联加载,JS svg 导入不适用于 URL。
所以我想为此找到最好的替代解决方案?
@ivnkld 回答为我指明了正确的方向,谢谢!对于像我这样的 Google 员工来说,这里是使用 hooks 实现相同方法的方法:
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 }}
/>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)