如何使用react-intl动态导入语言文件至APP.js并传递选中语言数据

Hey there! Let's work through your two React-Intl needs one by one. I’ll keep this practical and easy to follow.

Right now you’re statically importing all your language files upfront — dynamic importing lets you load only the language your user needs, which is better for performance. Here’s how to do it:

Option 1: Load in index.js first (then pass to App) #

This is a clean approach since you’re handling locale detection and message loading once at the root, then passing the data along. Update your index.js like this:

import { IntlProvider, addLocaleData } from 'react-intl'
import ReactDOM from 'react-dom/client'
import en from 'react-intl/locale-data/en'
import fr from 'react-intl/locale-data/fr'
import App from './App'

addLocaleData(...en, ...fr)

// Get the user's preferred locale
const getUserLocale = () => {
  return (navigator.languages && navigator.languages[0]) || 
         navigator.language || 
         navigator.userLanguage || 
         'en-US'
}

// Dynamically load the corresponding language messages
const loadMessages = async (locale) => {
  const langKey = locale.split('-')[0] // Convert 'en-US' to 'en' for file matching
  try {
    // Dynamically import the language file
    const messagesModule = await import(`../popup/localMessages/${langKey}`)
    return messagesModule.default // Assume your files use `export default`
  } catch (error) {
    // Fallback to English if the language file doesn't exist
    const fallbackModule = await import('../popup/localMessages/en')
    return fallbackModule.default
  }
}

// Initialize and render the app once messages are loaded
const initApp = async () => {
  const locale = getUserLocale()
  const messages = await loadMessages(locale)
  const root = ReactDOM.createRoot(document.getElementById('root'))
  
  root.render(
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  )
}

initApp()

Option 2: Load directly in App.js #

If you prefer handling the dynamic import inside App.js, use useEffect and useState to manage loading state:

// App.js
import { IntlProvider, useIntl } from 'react-intl'
import { useEffect, useState } from 'react'

function AppContent() {
  // Use useIntl to access locale/messages once loaded
  const intl = useIntl()
  return (
    <div>
      <h1>{intl.formatMessage({ id: 'welcome' })}</h1>
      {/* Your app content here */}
    </div>
  )
}

function App() {
  const [messages, setMessages] = useState(null)
  const locale = (navigator.languages && navigator.languages[0]) || 
                navigator.language || 
                navigator.userLanguage || 
                'en-US'
  const langKey = locale.split('-')[0]

  useEffect(() => {
    const fetchMessages = async () => {
      try {
        const module = await import(`../popup/localMessages/${langKey}`)
        setMessages(module.default)
      } catch (err) {
        const fallbackModule = await import('../popup/localMessages/en')
        setMessages(fallbackModule.default)
      }
    }
    fetchMessages()
  }, [langKey])

  // Show a loading state while messages load
  if (!messages) return <div>Loading...</div>

  return (
    <IntlProvider locale={locale} messages={messages}>
      <AppContent />
    </IntlProvider>
  )
}

export default App

Note: Make sure all your language files use export default for their message objects — this is required for the dynamic import to work correctly.

You’ve got two solid options here, depending on your needs:

Option 1: Pass via props #

If you need direct access to locale/messages in App.js, just pass them as props from index.js:

// index.js (update the initApp function)
const initApp = async () => {
  const locale = getUserLocale()
  const messages = await loadMessages(locale)
  const root = ReactDOM.createRoot(document.getElementById('root'))
  
  root.render(
    <IntlProvider locale={locale} messages={messages}>
      <App currentLocale={locale} currentMessages={messages} />
    </IntlProvider>
  )
}

Then receive them in App.js:

// App.js
function App({ currentLocale, currentMessages }) {
  console.log('Current language:', currentLocale)
  console.log('Loaded messages:', currentMessages)
  
  return (
    {/* Your app content */}
  )
}

Option 2: Use useIntl hook (no props needed) #

Since you’re wrapping App in IntlProvider, you can access locale and messages directly using React-Intl’s built-in hook in any component:

// App.js
import { useIntl } from 'react-intl'

function App() {
  const intl = useIntl()
  
  console.log('Current locale:', intl.locale)
  console.log('All messages:', intl.messages)
  
  return (
    <div>
      <p>{intl.formatMessage({ id: 'currentLang' }, { lang: intl.locale })}</p>
    </div>
  )
}

This is usually the cleaner approach because it leverages React-Intl’s context system, so you don’t have to pass props down through multiple components if you need the data elsewhere.

内容的提问来源于stack exchange，提问作者saran