ReactとJSXでアセットパス変数を追加する最も良い方法は？

Question

アセットパス変数を追加する最も良い方法は何ですか？

環境（ローカル、ステージング、プロダクション）によって異なるアセットディレクトリを持つアプリを開発しています。

現時点では、すべての画像パスはJSXでハードコードされていますが、これはローカルで開発する場合には問題ありません。ただし、ステージング時には、アセットのパスが少し異なります。

私が話していることの簡単な例です。

render() { 
    return (
     <div className="home-container"> 
      <img className="home-container__logo" src="/images/ui/logos/imagename.png" /> 
     </div> 
    ); 
} 

"/images"に画像src属性ポイント。これは、他の環境では異なる場合があります。

アセットパスvarを追加する、または{% static 'images/ui/logos/imagename.png' %}のようなものを実行する「リアクション方法」はありますか？

乾杯

Answer 1

ありは一切リアクトで資産パスのヘルパーに建てられませんが、あなたの直感が良いですされています。これは良い抽象化され、そしてあなた自身を作る価値があります。あなたはWebPACKのを使用している場合、あなたはあなたのルートへのパスが含まれるようにmodule resolveを設定することができたフォルダを反応させ、その後、簡単な解決策は次のようになります。あなたは、WebPACKのか、いくつかの同等のものを使用していない場合

# app/helpers/AssetHelper.js 
export default { 
    imagePath: (path) => { 
    return `/images/${path}` 
    } 
} 

# your component 
import { imagePath } from 'app/helpers/AssetHelper' 

render() { 
    return (
    <div className="home-container"> 
     <img className="home-container__logo" src=${imagePath('ui/logos/imagename.png')} /> 
    </div> 
); 
} 

パスは相対的である必要があり、これは簡単な解決策ではありません。 webpackを使用している場合は、module resolveをチェックしてください。インポートされたファイルパスを単純化することができます。

例のWebPACKの設定使用して、モジュールの解決：

# webpack.config.js 
var path = require('path') 

module.exports = { 
    entry: ..., 
    output: ..., 
    resolve: { 
    // specify your new path relative to the webpack config file 
    modules: [path.resolve(__dirname, './app'), 'node_modules'] 
    } 
}