反应注入动态SVG.react-svg

Question

我有一个愚蠢的组件，可以从Weatherapi中传递道具。我希望能够根据从API发送的内容动态更改SVG图像。我已经安装了NPM模块react-svg：https：//github.com/atomic-app/reeact-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文件夹中，以确保直接路径查看是否有效。不幸的是，它不是。

我的控制台目前正在记录我的回调属性： Unable to load SVG file: ../common/svg/O1n.svg undefined

callback属性在react-svg中工作。这是无法解决的路径，我不确定原因。如果您还有其他关于我如何实现我要在react-svg之外达到的目标的简单建议，请随时提及。

感谢您的任何时间回答或帮助我面临的当前困境。

Answer 1

您的 ReactSVG's path需要与您相对于包含 ReactSVG

Answer 2

嗨，我正在使用此插件：react-inlinesvg

这样，我可以加载这样的本地文件：

import SVG from 'react-inlinesvg';
 <SVG src="../../images/logo.svg">
 </SVG>

Answer 3

您可以用类似的东西导入SVG

export const Logo = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 27" {...props}>
    <path
      d="M112.2,9.6h-0.6v...z"
    />
  </svg>
);

然后

import { Logo } from "../path/to/file"

这很酷，因为它为您提供了更多选择，除了fill