Reactで長いインポートリストを避ける

Question

React（Create React Appを使用して）で作成しているSETゲームでは、81個の可能なカードをインポートする必要があります。 Pythonスクリプトの助けを借りて、私は輸入

import i0000 from './assets/0000.png' 
import i0001 from './assets/0001.png' 
[...] 
import i2221 from './assets/2221.png' 
import i2222 from './assets/2222.png' 

のこの非常に長いリストを作成し、私は各カードを表す文字列を使用してこれらの変数を参照する必要がありますから、私はこのオブジェクトを持っている：

const refs = { 
    '0000': i0000, 
    '0001': i0001, 
    [...] 
    '2220': i2220, 
    '2221': i2221, 
    '2222': i2222 
}; 

良いことは、今、私はすべてのカードの画像が

<img src={refs[card]} /> 

で簡単に呼ばれるように事前にロードされているということである。しかし悪いことは、私はそれを動作させるとんでもないコードの164行を持っています。画像がいっぱいのディレクトリをプリキャッシュして参照するためのより良い方法があるのだろうかと思います。

Answer 1

publicフォルダにすべての画像を移動します（例：public/cards）。

で参照することができます。importステートメントは不要です。

Webpackは参照画像が欠落していると警告することができなくなるので、それらが存在することを確認してください。

Answer 2

二つのアプローチ：

まず、手動でこのようなあなたのコードをstruturingでレフリーオブジェクトを作成排除：

export i0000 from './assets/0000.png' 
export i0001 from './assets/0001.png' 

そして、あなたはこれらの資産を使用したい：

imports * as refs from './assets' 
<img src={refs[card]} /> 

第二に、ダイナミックなニーズをサポートするバンドルシステムを使用することができます。 https://webpack.github.io/docs/context.html#dynamic-requires