我意識到這可能是一個非常初學者的問題，但我不明白這里出了什么問題我已經將問題簡化為這個，我正在嘗試撰寫一個存盤計算器及其值的基本應用程式，以便我可以在幾個不同的計算器上作業一次，這是我在 react .jsx 檔案中的基本代碼
function CalcParse(){
let calculators = require('./Calcs.json')
.JSON.parse
.calcs;
return(
<div>
{calculators.map(calc => <p key={calc.name}>{calc.name}</p>)}
</div>
)
}
我的 .JSON 檔案是
{ "calcs":[
{
"name":"Extended Surface Rod",
"args":"h, k, D"
},
{
"name":"Default Calculator",
"args":"A,B"
}]
}
然后我的 index.js 檔案是
import ReactDOM from 'react-dom';
import React from 'react';
import CalcParse from './CalcParse.jsx'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
<CalcParse/>
</React.StrictMode>
);
煩人的是，我的代碼編譯得很好，但回傳時會出現白屏
uj5u.com熱心網友回復：
您可以json直接使用檔案require。
function CalcParse(){
let calculators = require('./Calcs.json');
return(
<div>
{calculators.calcs.map(calc => <p key={calc.name}>{calc.name}</p>)}
</div>
)
}
更好的方法是：
import calculators from './Calcs.json';
// ...
function CalcParse(){
return (
<div>
{calculators.calcs.map(calc => <p key={calc.name}>{calc.name}</p>)}
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/461356.html