javascript - REACT 动态注入(inject) SVG。 react svg

Question

我有一个从 weatherAPI 传递下来的 props 的dumb组件。我希望能够根据从 API 发回的内容动态更改 SVG 图像。我已经安装了一个 npm 模块 react-svg: https://github.com/atomic-app/react-svg .这具有 svg-injector 的依赖性:https://www.npmjs.com/package/svg-injector我也安装了。我目前正在运行这些依赖项所依赖的所有正确版本的 npm、react 和 react-dom。现在，我只是尝试使用 react-svg 模块引入 SVG。这是文件:

import React, {PropTypes} from 'react';
import styles from '../common/contentBoxStyles';
import ReactSVG from 'react-svg';

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={'../common/svg/O1n.svg'} callback={(svg) => console.log(svg)} />
                    <div className="row" style={styles.weatherBoxContainer.temps}>
                        <div className="col-sm-4">
                            <div>{Math.floor(report.main.temp_max)}°</div>
                            <div>{Math.floor(report.main.temp_min)}°</div>
                        </div>
                        <div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
                            {Math.floor(report.main.temp)}°
                        </div>
                    </div>
                </div>
                CA
            </div>
            <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                <div style={styles.weatherBoxContainer.weatherReport}>
                    Report
                </div>
                UT
            </div>
            <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                <div style={styles.weatherBoxContainer.weatherReport}>
                    Report
                </div>
                MN
            </div>
            <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                <div style={styles.weatherBoxContainer.weatherReport}>
                    Report
                </div>
                DC
            </div>
            <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
                <div style={styles.weatherBoxContainer.weatherReport}>
                    Report
                </div>
                NY
            </div>
        </div>
    </div>
);
};

WeatherReport.propTypes = {
    report: PropTypes.object
   };

export default WeatherReport;

这里是供引用的文件树:

src
|_ _components
|   |_ _dashboard
|   |   |_ _WeatherReport.js
|   |_ _common
|       |_ _svg
|           |_ _O1n.svg

我是否遗漏了一些需要在这里完成的事情？有没有人对我如何解决这个问题有任何建议？我应该注意，我已尝试将 SVG 放在 dashboard 文件夹中，以确保直接路径以查看是否可行。不幸的是，事实并非如此。

我的控制台当前正在通过我的回调属性进行记录:无法加载 SVG 文件:../common/svg/O1n.svg未定义

callback 属性正在为 react-svg 工作。这是无法解析的路径，我不确定原因。如果您对我在 react-svg 之外如何实现我试图达到的目标有任何其他简单的建议，请随时提及。

感谢您花时间回答或帮助我解决当前面临的困境。

Answer 1

您的 ReactSVG 的路径 需要相对于您提供服务的文档根目录，而不是相对于包含 ReactSVG 的 js 文件>