map（）メソッドを使用して動的にhrefファイルのURLを作成する

Question

hrefファイルのURLを作成するために2つの文字列を連結しようとしています。文字列値の1つは、（document.jsonファイル内の）オブジェクトのDataDocuments配列から得られます。

documents.jsonファイル：

[ 
{ "year":"2017", "ref": "20170303", "file_name": "deed_20170303.pdf", "full_path": "../../../data/statements/deed_20170303.pdf" }, 
{ "year":"2016", "ref": "201604", "file_name": "deed_20160413.pdf", "full_path": "../../../data/statements/deed_20160413.pdf" } 
] 

私はhrefの構築に私の試みで、私のコードに次のようしている（試行＃1 - FAILED）：

のconst statementPath =」../。 ./../data/statements/ ";

import deed from "../../../data/statements/deed_20170303.pdf"; 

<Table> 
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}> 
<td><a href={deed} download>{item.file_name}</a></td> 
</tr> 
))} 
</Table> 

私は、問題は、私は完全なパスを構築してどのように思った： - 私は単に私の内部depenedencies（WORKS試行＃2）の下で定義された完全な文字列を持っているWHN

<Table> 
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}> 
<td><a href={statementPath.concat(item.file_name)} download>{item.file_name}</a></td> 
</tr> 
))} 
</Table> 

次のコードでは、作業を行います文字列は、私はしても、データオブジェクトに「full_path」を追加してみました、それはまだ動作しません（試行＃3は - FAILED）：

試行＃1と試行＃3の場合

<Table> 
{DataDocuments.map((item, index) => (
<tr key={item.type.concat(item.ref)}> 
<td><a href={item.full_path} download>{item.file_name}</a></td> 
</tr> 
))} 
</Table> 

、私はダウンロードを取得しますしかし、いつ「Adobe Readerは、サポートされているファイルタイプでないか、ファイルが破損しているため、「deed_20170303.pdf」を開くことができませんでした」と、Adobe Readerでファイルを開きます。

すべてのヘルプがわかります私はマップメソッド内でhrefを動的に構築できます。前もって感謝します。

Answer 1

@ john-ruddell - あなたの以前の投稿に感謝します。私はインライン・ニーズを試しましたが、それはうまくいかなかったのです。あなたのtipをconsole.log（証書）に書いておけば、正しい方向に向けるのに役立ちました。私webpack.config.jsで

、私は次のように持っていた：

 { 
      test: /\.(pdf|png|jpg|woff|woff2|ttf|eot|svg)$/, 
      use: ["file-loader?name=images/[name].[ext]"] 
     } 

そして、それが道にconsole.log（行為）のプリントだ - > "/js/images/Statement_20170303.pdf"

私は私のwebpack.config.jsを変更：

{ 
    test: /\.(pdf|png|jpg|woff|woff2|ttf|eot|svg)$/, 
    use: ["file-loader?name=[path][name].[ext]"] 
    }, 

とに私のコードを変更：

<a href={"/js/data/statements/".concat(item.file_name)} download> 

今のところ私はまだリアクトを学んでいるので、これはうまくいくでしょう。私がWebpackとReactにもっと慣れ親しむにつれて、私はこれを解決するより良い方法を見つけることを願っています。ありがとう！