javascript - 显示来自本地 JSON 文件的数据
问题描述
我正在从Tyler Mcginnis 的 React 课程学习 React 编码(我强烈推荐顺便说一句),我决定开发自己的项目,一个大学管理网站,可以用不同的语言显示。
到目前为止,我已经开发了登录页面,请注意我使用的是 Babel:
登录.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>
)
}
}
我想根据存储在本地 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"
}
}
]
我尝试了几种在 Internet 上找到的解决方案,但没有一个对我有用。
我尝试导入包含 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"
}
}
]
}
};
因此,我有两个问题:
- 做我想做的事情的最好方法是什么?
- 如何在 Login.js 中显示 JSON 数据?
解决方案
我认为您export
的 Languages.js 文件中只缺少关键字:
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"
}
}
]
}
};
现在你应该可以languagedata
在你的 React 组件中使用
import { languagedata } from './Languages'
推荐阅读
- flutter - 如何创建具有内阴影和渐变填充的卡片
- reactjs - 对于 React 项目,@emotion/react 比 @emotion/css 有什么好处?
- python - 尝试导入时没有名为“PyPDF2”的模块
- apache - Htaccess 将子文件夹重写为子域
- python - 在 gcloud -django 上上传图片时没有名为“config”的模块
- sapui5 - 预期为 '}' 而在表达式中看到 '='
- java - 使用 Canvas 正确绘制点
- cordova - 科尔多瓦 - 状态栏中的图像
- scala - 如何在 play framework 2.5 中将 DBApi 注入到 trait 组件中?
- c# - 如何在后台运行异步任务?