這篇文章主要介紹了react中怎么引用json，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)成都全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、遂昌網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5場(chǎng)景定制、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為遂昌等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

react中引用json的方法：1、直接import引入，使用【create-react-app】來構(gòu)建項(xiàng)目；2、把json文件改成js文件，把原本json中的數(shù)據(jù)賦值給變量data。

react中引用json的方法：

第一種：直接import引入

需要使用json-loader模塊，如果你是使用create-react-app來構(gòu)建項(xiàng)目，那么該模塊已經(jīng)包含在內(nèi)，

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

data是我自己取的名字，類似組件名，不用export default data來導(dǎo)出，不過在json文件中這樣寫也會(huì)報(bào)錯(cuò)

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

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

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

這2種方法訪問數(shù)據(jù)如下

{data[0].name}
{data[0].url}
{data[1].name}
{data[1].url}
{data[2].name}
{data[2].url}

這2種方法的主要區(qū)別

• json文件不需要export default導(dǎo)出，也不支持該語法，會(huì)報(bào)錯(cuò)，

• js文件需要把數(shù)據(jù)賦值給一個(gè)變量，在export default導(dǎo)出，

• json文件中的屬性和值都要用雙引號(hào)，否則會(huì)報(bào)錯(cuò)，js文件屬性可以不用加雙引號(hào)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享react中怎么引用json內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!