###前提・実現したいこと
下記のようなディレクトリ構造で、SelectBox.jsx
が下記のような内容だとします。
root/
├ dist/
├ json_data/
│ └ data.json
├ node_modules/
├ src/
│ ├ components/
│ │ ├ Hoge.jsx
│ │ └ SelectBox.jsx
│ └ index.jsx
├ package.json
└ webpack.config.js
###SelectBox.jsx
js
1import React from 'react' 2import request from 'superagent' 3import Hoge from './Hoge.jsx' 4 5export default class SelectBox extends React.Component { 6 constructor(props) { 7 super(props) 8 //状態の初期化 9 this.state = { 10 datas: null //読み込んだデータ保存用 11 } 12 } 13 14 //コンポーネントがマウントされるとき 15 componentWillMount(){ 16 //jsonデータを読み込む 17 request.get('../../json_data/data.json') 18 .accept('application/json') 19 .end((err, res) => { 20 this.loadedJSON(err, res) 21 }) 22 } 23 24 //中略 25 26 //コンポーネントの描画 27 render(){ 28 //読み込んだデータからselect要素の作成 29 const options = this.state.datas.map((data) => { 30 return( 31 <option value={data} key={data}> 32 {data} 33 </option> 34 ) 35 }) 36 //select要素として描画 37 return( 38 <div className='App' style={style}> 39 <form method='post'> 40 データ:<select name='data'>{options}</select> 41 <input type='submit' value='Submit' /> 42 </form> 43 <Hoge /> 44 </div> 45 ) 46 } 47} 48
data.json
を取得してきて、セレクトボックスとして表示するコンポーネントです。
これらのコードはwebpackの設定でバンドルされてdist/
に出力されるようになっています。
その際気になったことがあります。
componentWillMount()
内でsuperagentによってdata.json
を読み込む際のパスを、
../json_data/data.json
../../json_data/data.json
../../../json_data/data.json
上記いずれの場合もdata.json
を取得できて、動作しているということです。
相対パスで表現すると、../../json_data/data.json
が正しいと思うのですが...
es2015のモジュールの理解が乏しいからか、理由が分かりません。
なぜこのようなことが起こってしまっているのでしょうか?
ご回答を頂けると非常に助かります_(..)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。