У меня есть немой компонент, который получает переданные реквизиты из weatherAPI. Я хочу иметь возможность динамически изменять изображение SVG в зависимости от того, что будет отправлено обратно из API. Я установил модуль 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';. Затем я реализовал ее в моем немом компоненте:Динамический импорт svg в React
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 нуждается, чтобы быть относительно корня документа вы служащий от NOT относительно файл JS, который содержит ReactSVG. Достаточно просто? Тем не менее, я использую babel, и все работает как JS, в один файл. Я совершенно новичок в webpack, babel, react и redux в этом отношении ... Любые предложения о том, как я могу попасть по пути к моему svg, когда все скомпилировано в один файл?