问题描述
我有一个笨拙的组件,可以从weatherAPI传递道具.我希望能够根据从API发送回的内容来动态更改SVG图像.我已经安装了一个npm模块react-svg
: https://github.com/atomic-app/react-svg .这具有svg-injector
的依赖项: https://www.npmjs.com/package/svg -injector 我也已经安装了.现在,我已导入react-svg
-> import ReactSVG from 'react-svg';
.然后,我在哑巴组件内部实现了它:
I have a dumb component that gets passed down props from a weatherAPI. I want to be able to dynamically change the SVG image depending on what gets sent back from the API. I have installed an npm module react-svg
: https://github.com/atomic-app/react-svg. This has a dependency of svg-injector
: https://www.npmjs.com/package/svg-injector which I have also installed. Now, I have imported react-svg
-> import ReactSVG from 'react-svg';
. I then implemented it with inside my dumb component:
const WeatherReport = ({report}) => {
return (
<div style={styles.body} className="row">
<div style={styles.weatherBoxContainer}>
<div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<ReactSVG path={'RELATIVE TO DOCUMENT ROOT I'M SERVING FROM'} callback={(svg) => console.log(svg)} />
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[0].main.temp_max)}°</div>
<div>{Math.floor(report.list[0].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[0].main.temp)}°
</div>
</div>
</div>
CA
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[1].main.temp_max)}°</div>
<div>{Math.floor(report.list[1].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[1].main.temp)}°
</div>
</div>
</div>
UT
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[2].main.temp_max)}°</div>
<div>{Math.floor(report.list[2].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[2].main.temp)}°
</div>
</div>
</div>
MN
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[3].main.temp_max)}°</div>
<div>{Math.floor(report.list[3].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[3].main.temp)}°
</div>
</div>
</div>
DC
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[4].main.temp_max)}°</div>
<div>{Math.floor(report.list[4].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[4].main.temp)}°
</div>
</div>
</div>
NY
</div>
</div>
</div>
);
};
WeatherReport.propTypes = {
report: PropTypes.object
};
export default WeatherReport;
现在,ReactSVG的路径需要相对于您正在提供的文档根目录,而不是相对于包含ReactSVG的js文件.很简单吧?但是,我正在使用babel,并且所有内容都被作为JS放到一个文件中.对于这件事,我对webpack
,babel
,react
和redux
还是很陌生...关于将所有内容都编译到一个文件中时我该如何打到svg
路径的任何建议?
Now, ReactSVG's path needs to be relative to the document root you're serving from NOT relative to the js file that contains ReactSVG. Simple enough right? However, I am using babel and everything is being served as JS, into one file. I am quite new to webpack
, babel
, react
and redux
for that matter... Any suggestions on how I am suppose to hit the path to my svg
when everything is being compiled into one file?
推荐答案
假设Webpack中构建步骤的输出位于根目录下的/dist/
文件夹中(例如),您还需要一个构建步骤来复制该文件夹中的任何其他外部文件,例如您的svg
文件.
Assuming the output from your build step in webpack is into a /dist/
folder off your root (for example) you would also want to have a build step to copy any other external files in that folder such as your svg
file.
/dist
|- bundle.js
|- myart.svg
然后在文件中,您可以简单地引用svg
作为
Then in your file you can reference the svg
simply as
<ReactSVG path="myart.svg" />
这篇关于在React中动态导入svg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!