react中如何引用json

react中引用json的方法：1、直接import引入，使用【create-react-app】來建構專案；2、把json文件改成js文件，把原本json中的資料賦值給變量data。

• 該方法適用於所有品牌電腦
  

react中引用json的方法：

第一種：直接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檔案屬性可以不用加雙引號

#相關免費學習推薦：javascript（影片）

以上是react中如何引用json的詳細內容。更多資訊請關注PHP中文網其他相關文章！