REACT 动态注入 SVG。反应SVG答案

【问题标题】：REACT Injecting dynamically SVG. react-svgREACT 动态注入 SVG。反应SVG
【发布时间】：2016-11-23 20:13:32
【问题描述】：

我有一个愚蠢的组件，它从 weatherAPI 传递道具。我希望能够根据从 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 文件夹中，以确保有直接路径来查看是否可行。不幸的是，它没有。

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

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

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

【问题讨论】：

标签： javascript reactjs svg

【解决方案1】：

您的ReactSVG 的path 需要相对于您提供的文档根目录，而不是相对于包含ReactSVG 的js 文件

【讨论】：

嗨，杰克，感谢您的回复。我想知道您是指我要导入 ReactSVG 的路径还是 ReactSVG 组件的属性路径。
path 与 ReactSVG 一起使用的属性：<ReactSVG path={...}
嗯。我对使用webpack 和react 还是很陌生。也许我不明白为我的应用程序提供服务的文档根在哪里。所有服务都在我的src 文件夹下。所以理论上我应该能够从src 文件夹中引用我的SVG，是吗？而不是../common/svg/O1n.svg（相对于包含ReactSVG的js文件），应该是./src/components/common/svg/O1n.svg？感谢您的帮助，杰克。
最简单的方法是让您的.svg 显示在浏览器中，方法是直接访问它，就像您真的从src 服务一样，那么它会像（猜测端口）http://localhost:3000/components/common/svg/01n.svg 那么如果你设置<ReactSVG path={'/components/common/svg/01n.svg'} .... /> 它应该可以工作。
好吧，你说的完全有道理。我开始认为这可能是不可能的，因为我使用的是react-router。据我了解，除非在我的路线文件夹中定义，否则我将无法访问此 SVG 文件。我也无法导入 SVG 文件。

【解决方案2】：

您好，我正在使用这个插件：react-inlinesvg

有了这个，我可以像这样加载一个本地文件：

import SVG from 'react-inlinesvg';

 <SVG src="../../images/logo.svg">
 </SVG>

【讨论】：

【解决方案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之外，它还为您提供了更多选择

【讨论】：