Question

我有一个愚蠢的组件，从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之外达到的目标，请随时提及。

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

Answer 1

您的ReactSVG 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

之外，它还提供更多选择

REACT动态注入SVG。反应-SVG

3 个答案: