Webpackを使用してReactで複数のSVGをインライン化する方法は？

Question

Reactアプリでインライン化したいSVGが12個以上あるとします。今のところ、私はsvg-react-loaderを使ってこのようにインポートしています。

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"; 

...など。私はそれぞれのイベントハンドラを設定し、イベントをホバーする必要があります。さらに、そのうちの1つが選択されると、その不透明度を変更したいと思います。

数時間後、多くの失敗した実験の結果、私が試した唯一のことは、このような親コンポーネントの内部にそれらをすべてレンダリングすることだけです。

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> 
     ); 
    }  
}); 

これもまたうまくいきますが、これはリアクションが意図した方法ではないと確信しています。このように作成したSVGコンポーネントを反復処理してプロパティを割り当てる方法はありますか？

Answer 1

一つの方法は、単に配列にそれらを入れてReact.createElementを使用することです：

const icons = [Svg1, Svg2, Svg3, Svg4]; 

return (
    <div className="icon" onClick={this.clickHandler}> 
     {icons.map((svg, i) => React.createElement(svg, { 
      className: "svg"+i, 
      opacity: (this.props.svg === this.props.currentSvg ? 1 : 0.3) 
     })} 
    </div> 
); 

別のオプション、あなたはWebPACKのを使用しているので、そのdynamic requireの機能を利用することです。

基本的には、WebPACKのあなたのアプリとバンドルするファイルのワイルドカードを与えることができ、その後、実行時に動的かつ同期それらを必要とします。

// right below your import statements 
const reqSvgs = require.context("../../images", false, /\.svg$/); 

// now anywhere in your code you can: 
const arrayOfSVGFilenames = reqSvgs.keys(); 
const specificSVG = reqSvgs("../../images/svg1.svg"); 
const allSVGsInAnArray = reqSvgs.keys().map(reqSvgs);