[英]Display data from a local JSON file
I'm learning to code in React from Tyler Mcginnis' React course (which I strongly recommend btw) and I decided to develop my own project, a university administration website, which can be displayed in different languages. 我正在学习泰勒·麦金尼斯 ( Tyler Mcginnis)的React课程 (我强烈建议顺便说一句)中的React代码,我决定开发自己的项目,一个大学管理网站,可以用不同的语言显示。
So far, I have developed the Login page, please note that I'm using Babel : 到目前为止,我已经开发了Login页面,请注意我正在使用Babel :
Login.js Login.js
import React from 'react'
import PropTypes from 'prop-types'
import { languagedata } from './Languages'
import languagesdata from '../languagesdata.json'
function LanguagesNav ({ selected, onUpdateLanguage}) {
const languages = ['EU', 'ES', 'EN']
return (
<div >
<h1 className='center-text header-lg'>
GAUR 2.0
</h1>
<ul className='flex-center'>
{languages.map((language) => (
<li key={language}>
<button
className='btn-clear nav-link'
style={language === selected ? { color: 'rgb(187, 46, 31)' } : null }
onClick={() => onUpdateLanguage(language)}>
{language}
</button>
</li>
))}
</ul>
</div>
)
}
LanguagesNav.propTypes = {
selected: PropTypes.string.isRequired,
onUpdateLanguage: PropTypes.func.isRequired
}
export default class Login extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedLanguage: 'EU'
}
this.updateLanguage = this.updateLanguage.bind(this)
}
componentDidMount () {
this.updateLanguage(this.state.selectedLanguage)
}
updateLanguage (selectedLanguage) {
this.setState({
selectedLanguage
})
}
render() {
const { selectedLanguage } = this.state
return (
<React.Fragment>
<LanguagesNav
selected={selectedLanguage}
onUpdateLanguage={this.updateLanguage}
/>
<form className='column player'>
<label htmlFor='username' className='player-label'>
//Just testing whether JSON can be displayed
{ languagesdata.data }
</label>
<div className='row player-inputs'>
<input
type='text'
id='username'
className='input-light'
placeholder='Erabiltzailea'
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<input
type='password'
id='username'
className='input-light'
placeholder='Pasahitza'
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<button
className='btn dark-btn'
type='submit'
>
Sartu
</button>
</div>
</form>
</React.Fragment>
)
}
}
I would like to display the website in the selected language based on the information stored in a local JSON file: 我想根据存储在本地JSON文件中的信息以所选语言显示网站:
[
{
"EU": {
"welcome": "Sartu GAUR 2.0ra",
"login": "Sartu"
},
"ES": {
"welcome": "Entra a GAUR 2.0",
"login": "Entrar"
},
"EN":{
"welcome": "Log into GAUR 2.0",
"login": "Log in"
}
}
]
I've tried several solutions that I've found on the Internet, but none of them worked for me. 我已经尝试了几种在Internet上找到的解决方案,但是没有一个对我有用。
I've tried importing a Javascript file that contains a JSON data (see below) and importing a JSON file itself (see JSON above). 我尝试导入一个包含JSON数据的Javascript文件(请参见下文),并导入一个JSON文件本身(请参见上文的JSON)。
const languagedata = {
"data": {
"languages": [
{
"euskara": {
welcome: "Sartu GAUR 2.0ra",
login: "Sartu"
},
"español": {
welcome: "Entra a GAUR 2.0",
login: "Entrar"
},
"english":{
welcome: "Log into GAUR 2.0",
login: "Log in"
}
}
]
}
};
Thus, I have 2 questions: 因此,我有两个问题:
I think you're only missing export
keyword in your Languages.js file: 我认为您仅在Languages.js文件中缺少
export
关键字:
export const languagedata = {
"data": {
"languages": [
{
"euskara": {
welcome: "Sartu GAUR 2.0ra",
login: "Sartu"
},
"español": {
welcome: "Entra a GAUR 2.0",
login: "Entrar"
},
"english":{
welcome: "Log into GAUR 2.0",
login: "Log in"
}
}
]
}
};
Now you should be able to import variable languagedata
in your React component using 现在您应该可以使用以下方式在React组件中导入可变
languagedata
了
import { languagedata } from './Languages'
To get data from json file you have to make a request to that file. 要从json文件中获取数据,您必须向该文件发出请求。
class App extends React.Component{ render(){ return( <div>geting json data</div> ); } componentDidMount(){ fetch('YOUR-JSON-FILE-PATH') .then(response => response.json()) .then(json => console.log(json)) } } ReactDOM.render(<App/>,document.getElementById("root"));
<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> <div id="root"></div>
OR You can use a synchronous way, 或者您可以使用同步方式,
const data = require("YOUR-JSON-FILE-PATH");
Hope it can help! 希望能对您有所帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.