在 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;
            ...
        }