How to use React and JavaScript to achieve front-end international support

How to use React and JavaScript to achieve front-end international support

With the development of globalization, more and more applications need to support multi-language environments. In order to meet the different language needs of users, it has become a necessary task to implement international support in front-end development. In this article, I will introduce how to use React and JavaScript to implement internationalization support on the front end, and provide specific code examples.

First, we need to prepare some international resource files. Resource files are usually a structure of key-value pairs, where the key represents the text that needs to be translated and the value represents the corresponding translation result. We can store these resource files in JSON format, each file corresponding to a language. For example, we have an English resource file named en.json and a Chinese resource file named zh.json.

Next, we can create a file called i18n.js and define a React context in it. This context will be used to save the currently selected language and provide a function to get the translation results. Here is a simple example:

// i18n.js
import React from 'react';

const availableLanguages = ['en', 'zh'];

const translations = {
  en: require('./en.json'),
  zh: require('./zh.json'),
};

export const I18nContext = React.createContext();

export function I18nProvider({ children }) {
  const [language, setLanguage] = React.useState('en');

  const translate = (key) => {
    return translations[language][key];
  };

  const switchLanguage = (lang) => {
    if (availableLanguages.includes(lang)) {
      setLanguage(lang);
    }
  };

  return (
    <I18nContext.Provider value={{ language, switchLanguage, translate }}>
      {children}
    </I18nContext.Provider>
  );
}

In the above code, we have defined the availableLanguages array to store the available language options. translationsThe object stores the contents of all resource files. The I18nProvider component accepts a children attribute to wrap the entire application and provide internationalization support. translateThe function accepts a key and returns the corresponding translation result. The switchLanguage function is used to switch languages. It will only take effect when the incoming language is in the availableLanguages array.

In the entry file of the application, we need to use the I18nProvider component to wrap the entire application and provide a language selection interface. Here is an example:

// App.js
import React from 'react';
import { I18nProvider } from './i18n';

function App() {
  return (
    <I18nProvider>
      <div>
        <h1 id="国际化示例">国际化示例</h1>
        <LanguageSwitcher />
        <WelcomeMessage />
      </div>
    </I18nProvider>
  );
}

function LanguageSwitcher() {
  const { switchLanguage } = React.useContext(I18nContext);
  
  const handleLanguageChange = (event) => {
    switchLanguage(event.target.value);
  };

  return (
    <select onChange={handleLanguageChange}>
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  );
}

function WelcomeMessage() {
  const { language, translate } = React.useContext(I18nContext);

  return <p>{translate('welcome')}</p>;
}

export default App;

In the above code, we first import the I18nProvider component and I18nContext context. In the App component, we wrap the entire application with I18nProvider and place a title, language selector, and welcome message inside it. The LanguageSwitcher component obtains the switchLanguage function in I18nContext through the useContext hook, and uses the onChange of the language selector This function is called in the event. The WelcomeMessage component uses the useContext hook to obtain the translate function in I18nContext and displays the translation results on the page.

Finally, we need to provide the corresponding translation content in the resource file. Here are examples of en.json and zh.json:

// en.json
{
  "welcome": "Welcome to React Localization Example"
}

// zh.json
{
  "welcome": "欢迎使用 React 国际化示例"
}

Now when the user selects a different language, the translation results in the application will be automatically renew.

To sum up, we can use React and JavaScript to achieve front-end international support. By creating a context and providing translation functions, we can easily use multiple locales in our application. I hope this article can bring you some useful information and sample code so that you can better implement front-end international support.

The above is the detailed content of How to use React and JavaScript to achieve front-end international support. For more information, please follow other related articles on the PHP Chinese website!