Я новичок в веб-разработке, и я дал задание изменить язык сайта без изменения страниц. (Например, somesite.com/en/home для Engli sh, somesite.com/jp/home для японского и др. c.,). Я думаю, что нашел способ используя React, но я не уверен, является ли этот подход к изменению языков естественным, эффективным или нет. Ниже мой код в React. js,
import React from 'react'
import metadata from './metadata'
class Display extends React.Component
{
constructor()
{
super()
this.state = {l: metadata[0]}
this.handleLanguageChange = this.handleLanguageChange.bind(this)
}
handleLanguageChange()
{
let lang = event.target.value;
if(lang == 'ta')
this.setState({l: metadata[0]})
else if(lang == 'en')
this.setState({l: metadata[1]})
else if(lang == 'jp')
this.setState({l: metadata[2]})
else if(lang == 'zh')
this.setState({l: metadata[3]})
}
render()
{
return(
<div>
<select onChange={this.handleLanguageChange}>
<option value="ta">Tamil</option>
<option value="en">English</option>
<option value="jp">Japanese</option>
<option value="zh">Chinese</option>
</select>
<h1>{this.state.l.language}</h1>
<h2>{this.state.l.title}</h2>
<p>{this.state.l.content}</p>
</div>
)
}
}
export default Display
и вот мои метаданные.
const data = [
{
language: 'தமிழ்',
title: 'அறிமுகம் ',
content: 'வேலை செய்கிறதா என பார்க்க'
},
{
language: 'English',
title: 'Introduction',
content: 'To check whether this is working or not'
},
{
language: '日本語',
title: '紹介',
content: '動くかどうか分かるのため'
},
{
language: '中文',
title: '介绍',
content: '知道这是否有效'
}
]
export default data
и, index. js также.
import React from 'react';
import ReactDOM from 'react-dom'
import Display from './Display'
ReactDOM.render(<Display />, document.getElementById('root'));
Когда я проверял это, это работало как сон. Но правильный ли это подход? Может ли это представлять угрозу безопасности?
Пожалуйста, ведите меня в правильном направлении.