0
我有一個愚蠢的組件，可以從weather API中傳遞道具。我希望能夠根據從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';。然後我和我的啞巴組件內部實現它：在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的建議？