在 HTML 中更改语言而不重定向的正确方法是什么？

Question

我是 web 开发的新手，我的任务是在不更改页面的情况下更改网站的语言。 （例如，somesite.com/en/home 用于英语，somesite.com/jp/home 用于日语等）。 我想我想出了一种使用 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'));

当我测试它时，它就像做梦一样。 但这种方法对吗？ 这会构成任何安全威胁吗？

请指导我正确的方向。

Answer 1

你的方法很好，可能是每个人都在使用的方法。

需要注意的是，如果您在没有“全局”状态/存储策略的情况下使用 prop 或 state 变量，则可能无法轻松地在各处刷新带有新文本的页面。

尝试考虑使用“上下文”将这种语言转换为更“全局”的变量，以便与您的任何组件一起在本地放置。 这样你就不必担心传递这个变量，你也可以有一个单独的 scope 来改变这个变量。

这在开始时并不明显，但是当您扩展代码库时，您会意识到您当前的解决方案无法扩展。

Answer 2

Keep json file each for all languages and then you can do like this:

    import english from './locales/english.json'

    handleLanguageChange()
        {
            let lang = event.target.value;
            if(lang == 'english')
                this.setState({stateOfLocale: 'english'});
                I18n.locale = stateOfLocale;
            ...
        }