我有一个简单的组件,它从天气API中接收props。我希望能够根据从API返回的内容动态更改SVG图像。我已经安装了npm模块
现在,ReactSVG的路径需要相对于你提供的文档根目录,而不是相对于包含ReactSVG的js文件。很简单,对吧?然而,我正在使用babel,一切都被作为JS编译成一个文件来提供服务。我对webpack、babel、react和redux都很新手...有什么建议吗?当一切都编译成一个文件时,我应该如何访问我的svg路径?
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';
。然后我在我的简单组件内部实现了它。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路径?