Как правильно изменить язык без перенаправления в HTML?

Question

Я новичок в веб-разработке, и я дал задание изменить язык сайта без изменения страниц. (Например, 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'));

Когда я проверял это, это работало как сон. Но правильный ли это подход? Может ли это представлять угрозу безопасности?

Пожалуйста, ведите меня в правильном направлении.

Answer 1

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

Answer 2

Ваш подход хорош, возможно, это тот же подход, который используют все.

Пару заметок, обновление страницы с новым текстом повсюду может быть нелегко выполнить, если вы используете переменную пропа или состояния без "global «Состояние / стратегия хранения.

Попробуйте подумать об использовании «Context», чтобы превратить этот язык в более «глобальную» переменную для локального размещения с любым из ваших компонентов. Таким образом, вам не нужно беспокоиться о передаче этой переменной, также вы можете иметь отдельную область для изменения этой переменной.

Это не очевидно в начале, но когда вы расширите свою кодовую базу, вы поймете, что ваше текущее решение не будет масштабироваться.