reactjs - 在 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我也安装了。现在，我已经导入了 react-svg -> import ReactSVG from 'react-svg';。然后我在我的dumb组件中实现了它:

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 提供到一个文件中。我对 webpack、babel、react 和 redux 还很陌生……关于如何做的任何建议当所有内容都被编译到一个文件中时，我想找到我的 svg 的路径吗？

Answer 1

假设您在 webpack 中构建步骤的输出位于根目录下的 /dist/ 文件夹中(例如)，您还需要一个构建步骤来复制其中的任何其他外部文件文件夹，例如您的 svg 文件。

/dist
|- bundle.js
|- myart.svg

然后在您的文件中您可以简单地引用svg

<ReactSVG path="myart.svg" />