react中怎么引入json文件和使用里面的數據

 

　　前言

　　初次使用react開發項目，順便記錄一下，技術有限，歡迎留言指正　　

 

　　 第一種：直接import引入

　　 需要使用json-loader模塊，如果你是使用create-react-app來構建項目，那么該模塊已經包含在內，

　  你只需要用import像引入組件那樣引入json文件即可，  import data from '../lessonlist/courselist.json';

　  data是我自己取的名字，類似組件名，不用export default data來導出，不過在json文件中這樣寫也會報錯

　  

 

　　 第二種：把json文件改成js文件

　　 把json文件改成js文件，然后把原本json中的數據賦值給變量data，

　  在用import引入即可，import data from '../lessonlist/courselist.js';

 　  

 

　　這2種方法訪問數據如下

<span className="lesson-link-line1">{data[0].name}</span>
<span className="lesson-link-line1">{data[0].url}</span>


<span className="lesson-link-line1">{data[1].name}</span>
<span className="lesson-link-line1">{data[1].url}</span>


<span className="lesson-link-line1">{data[2].name}</span>
<span className="lesson-link-line1">{data[2].url}</span>

 

　　這2種方法的主要區別

　　json文件不需要export default導出，也不支持該語法，會報錯，

　　js文件需要把數據賦值給一個變量，在export default導出，

　　json文件中的屬性和值都要用雙引號，否則會報錯，js文件屬性可以不用加雙引號

　　

　  json動態修改數據

　 上面的方法不支持json動態修改數據，假設你json文件數據是一個數組，並且數據是比較規律的列表，

　 可參考這個react小書，詳細講解了如何在react中渲染數據列表，

　 http://huziketang.mangojuice.top/books/react/lesson13

　

　 react渲染數據列表代碼截圖

　 import DataList from '../lessonlist/courselist.json';

　 下面截圖中的DataList的數據就來自於import進來的courselist.json文件