reactjs - 控制台记录导入的 SVG 会给出数字
问题描述
当我导入 SVG 并将其作为道具传递给另一个组件时,console.log 传递的 SVG 道具我得到数字。由于这个原因,我遇到了问题,因为这react-native-svg-uri
需要我将 SVG 作为其svgXmlData
属性的字符串导入。
父组件
import SVGICON from './icon.svg';
const ParentComponent = () => {
console.log(SVGICON); // this outputs numbers
return (
<ChildComponent
icon={SVGICON}
/>
);
};
子组件
import SvgUri from 'react-native-svg-uri'
const ChildComponent = (props) => {
return (
<SvgUri
width="24"
height="24"
svgXmlData={props.icon}
/>
);
};
但是我也注意到,当我将图标导入到与 SvgUri 相同的位置时,它会正确呈现,并且 console.log 会将正确的 svg 组件呈现为字符串。
有时这可行,但我不知道为什么
import SvgUri from 'react-native-svg-uri';
import SVGICON from './icon.svg';
const WorkingComponent = () => {
return (
<SvgUri
width="24"
height="24"
svgXmlData={SVGICON}
/>
);
};
解决方案
也许您可以将文件名作为道具传递并在子组件中动态加载文件。
我有一个类似的组件,我在其中加载 svg 图标,如下所示:
logo = require(``./icons/${props.icon}.svg``)
推荐阅读
- ios - 如果满足 swift 条件,则显示 fcm 通知
- html - HTML - 移动容器下面到下面一个而不破坏另一个容器
- python-3.x - Docker:“驱动程序在端点测试容器上编程外部连接失败”
- windows - Reactjs:为页面构建静态 html 失败
- .net-core - 智能感知和 .NetCore
- apache-spark - 如何通过 PySpark 查找 Hive 表是否定义为外部表?
- java - vert.x - 可能有多少个 Timer
- php - Preg 匹配仅验证带符号 + 或 - 的整数或小数
- python - 将 tf.nn.embedding_lookup 与多列一起使用
- python - 无法使用 scrapy 从雅虎财经网站获取当前股价