在React中动态导入svg

在React中动态导入svg

本文介绍了在React中动态导入svg的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个笨拙的组件,可以从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放到一个文件中.对于这件事,我对webpackbabelreactredux还是很陌生...关于将所有内容都编译到一个文件中时我该如何打到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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-19 11:06