在项目中,有一个json文件,其中包含了我需要在组件中显示的数据。如何在react中正确访问json文件,并从json中输出数据?
data.json
{
"dictionary": [
{
"index": "1",
"engwords": "Hello",
"ruswords": "Привет"
},
{
"index": "2",
"engwords": "How are you?",
"ruswords": "Как твои дела?"
},
{
"index": "3",
"engwords": "How old are you?",
"ruswords": "Сколько тебе лет?"
}
]
}
组件.js
import React, {Component} from "react";
import "./style.scss";
const dictionary = require ('./../../dictionary/dictionary.json');
export default class Test extends Component {
render() {
return (
<div className="test">
{dictionary.map(elem => (
<p>{elem}</p>))}
</div>
);
}
};
这将渲染你的JSON中的所有数据
import React, {Component} from "react";
import "./style.scss";
const dictionaryFile = require ('./../../dictionary/dictionary.json');
export default class Test extends Component {
render() {
return (
<div className="test">
{dictionaryFile.dictionary.map(elem => (
<div>
<p>{elem.index}</p>
<p>{elem.engwords}</p>
<p>{elem.ruswords}</p>
</div>
))
}
</div>
);
}
};
所有的键和值将被显示
import React, {Component} from "react";
import "./style.scss";
const dictionaryFile = require ('./../../dictionary/dictionary.json');
export default class Test extends Component {
render() {
return (
<div className="test">
{dictionaryFile.dictionary.map(elem => (
<div>
{Object.keys(elem).forEach(function(key) {
<p>{key}: { elem[key]}</p>
});}
</div>
))
}
</div>
);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
首先是将你的JSON文件导入React中。该文件通常存储在src文件夹的某个地方。你有2个常见的选项。 第一个是使用 json-loader 或者第二,你可以将你的文件存储为一个Javascript文件,并导出其内容,如。
// Save this as yourFile.js
const dataFromFile = {
"dictionary": [
{
"index": "1",
"engwords": "Hello",
"ruswords": "Привет"
},
{
"index": "2",
"engwords": "How are you?",
"ruswords": "Как твои дела?"
},
{
"index": "3",
"engwords": "How old are you?",
"ruswords": "Сколько тебе лет?"
}
]
}
export default dataFromFile
然后在你的组件中,从'...srcdataFromFile'导入dataFromFile;
从'...srcdataFromFile'导入dataFromFile。
然后在你的组件中:从'.srcdataFromFile'导入dataFromFile;然后
return (
<div>
{dataFromFile.dictionary.map(elem => (<p>{elem}</p>))}
</div>
)