如何使用Webpack将多个SVG内联到React？

假设我有十几个或更多的SVG，我想在我的React应用程序中内联。现在，我用这个方法导入它们

import Svg1 from "!babel!svg-react!../../images/sdg1.svg";
import Svg2 from "!babel!svg-react!../../images/sdg2.svg";
import Svg3 from "!babel!svg-react!../../images/sdg3.svg";
import Svg4 from "!babel!svg-react!../../images/sdg4.svg";

const Icon = React.createClass({

    //Callback that updates the state of a parent component
    clickHandler() {
        this.props.handler(this.props.svg) 
    }

    render() {

        const icons = [
            <Svg1 className="svg1" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg2 className="svg2" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg3 className="svg3" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg4 className="svg4" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
        ];

        return (
            <div className="icon" onClick={this.clickHandler}>
                {icons[this.props.svg]}
            </div>
        );
    }    
});

……等等。我需要在每个事件上设置事件处理程序并悬停事件。此外，当其中一个被选中时，我想改变它的不透明度

经过几个小时和多次失败的实验后，我唯一尝试过的有效方法就是在这样一个父组件中渲染它们

import Svg1 from "!babel!svg-react!../../images/sdg1.svg";
import Svg2 from "!babel!svg-react!../../images/sdg2.svg";
import Svg3 from "!babel!svg-react!../../images/sdg3.svg";
import Svg4 from "!babel!svg-react!../../images/sdg4.svg";

const Icon = React.createClass({

    //Callback that updates the state of a parent component
    clickHandler() {
        this.props.handler(this.props.svg) 
    }

    render() {

        const icons = [
            <Svg1 className="svg1" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg2 className="svg2" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg3 className="svg3" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
            <Svg4 className="svg4" opacity={this.props.svg === this.props.currentSvg ? 1 : 0.3} />
        ];

        return (
            <div className="icon" onClick={this.clickHandler}>
                {icons[this.props.svg]}
            </div>
        );
    }    
});

const Icon=React.createClass({
//更新父组件状态的回调
clickHandler（）{
this.props.handler（this.props.svg）
}
render（）{
常量图标=[
];
返回(
{icons[this.props.svg]}
);
}    
});

---

同样，这是可行的，但我确信这不是我们想要的反应方式。有没有一种方法可以迭代以这种方式创建的SVG组件来分配它们的属性

一种方法是将它们放在一个数组中并使用：

---

是的，成功了。非常感谢。回答得真棒。到目前为止，我刚刚用React.createElement（我完全应该想到这个）尝试了上面的部分。稍后将在此处尝试webpack解决方案。