面试题：React中使用Context实现国际化方案的基本步骤

创建Context：

使用createContext函数从react库中创建一个Context对象。例如：

import React from'react';
const LanguageContext = React.createContext();
export default LanguageContext;

传递语言信息：

在应用的较高层级组件（通常是靠近根组件的位置）使用Context.Provider来包裹需要国际化的部分，并通过value属性传递语言相关信息。
假设我们有一个App组件，并且维护了一个language状态以及对应的语言资源对象languageResources：

import React, { useState } from'react';
import LanguageContext from './LanguageContext';
const languageResources = {
  en: { greeting: 'Hello' },
  zh: { greeting: '你好' }
};
function App() {
  const [language, setLanguage] = useState('en');
  return (
    <LanguageContext.Provider value={{ language, languageResources }}>
      {/* 应用的其他组件 */}
    </LanguageContext.Provider>
  );
}
export default App;

在组件中消费这些信息：

使用Context.Consumer（旧方法）：

在需要使用国际化信息的组件中，引入LanguageContext，然后使用Context.Consumer包裹需要的部分，并在render函数中获取Context的值。

import React from'react';
import LanguageContext from './LanguageContext';
function Greeting() {
  return (
    <LanguageContext.Consumer>
      {({ language, languageResources }) => (
        <div>{languageResources[language].greeting}</div>
      )}
    </LanguageContext.Consumer>
  );
}
export default Greeting;

使用useContext Hook（新方法，React 16.8+）：

引入useContext Hook和LanguageContext，通过useContext获取Context的值。

import React, { useContext } from'react';
import LanguageContext from './LanguageContext';
function Greeting() {
  const { language, languageResources } = useContext(LanguageContext);
  return <div>{languageResources[language].greeting}</div>;
}
export default Greeting;

星途面试题库

面试题：React中使用Context实现国际化方案的基本步骤

知识考点

面试题答案