react-i18next能否参照react-intl定义消息？提取至JSON方法咨询

Great questions! Let's break them down one by one to help you get up and running with react-i18next smoothly:

1. How to define messages with react-i18next #

Defining messages in react-i18next is flexible and fits different project workflows. Here are the most common approaches:

Step 1: Set up your i18n configuration #

First, initialize the i18n instance (usually in a file like i18n.js) and define your translation resources directly or link to external JSON files:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// Define resources inline (or load from JSON later)
const resources = {
  en: {
    translation: {
      welcome: 'Welcome to our app!',
      greeting: 'Hello, {{name}}!',
      button: {
        submit: 'Submit',
        cancel: 'Cancel'
      }
    }
  },
  es: {
    translation: {
      welcome: '¡Bienvenido a nuestra aplicación!',
      greeting: '¡Hola, {{name}}!',
      button: {
        submit: 'Enviar',
        cancel: 'Cancelar'
      }
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en', // Default language
    interpolation: {
      escapeValue: false // React handles value escaping automatically
    }
  });

export default i18n;

Step 2: Use messages in components #

Once configured, access your translations using the useTranslation hook or Trans component:

• Basic usage with useTranslation:

import { useTranslation } from 'react-i18next';

function Greeting() {
  const { t } = useTranslation();
  return <h1>{t('greeting', { name: 'Maria' })}</h1>;
}

• Access nested keys:

function ActionButtons() {
  const { t } = useTranslation();
  return (
    <div>
      <button>{t('button.submit')}</button>
      <button>{t('button.cancel')}</button>
    </div>
  );
}

• Rich text with Trans component:

import { Trans } from 'react-i18next';

function TermsNotice() {
  return (
    <Trans>
      Please <strong>review</strong> our <a href="/terms">terms of service</a> before continuing.
    </Trans>
  );
}
// This maps to a translation key like:
// "Please <1>review</1> our <3>terms of service</3> before continuing."

2. Does react-i18next support defining messages in code first (like react-intl) then extracting to JSON with i18next-scanner? #

Absolutely! This is a widely used workflow, and i18next-scanner integrates perfectly with react-i18next to extract messages from your codebase into JSON files. Here's how to set it up:

Step 1: Install i18next-scanner #

Add it as a development dependency:

npm install i18next-scanner --save-dev

Step 2: Create a scanner configuration file #

Make a file like i18next-scanner.config.js in your project root:

const fs = require('fs');

module.exports = {
  input: [
    'src/**/*.{js,jsx,ts,tsx}', // Scan all component files
    '!src/**/*.test.{js,jsx,ts,tsx}' // Skip test files
  ],
  output: './public/locales', // Directory to save extracted JSON
  options: {
    lngs: ['en', 'es'], // Your target languages
    defaultLng: 'en',
    defaultNs: 'translation',
    resource: {
      loadPath: './public/locales/{{lng}}/{{ns}}.json',
      savePath: './public/locales/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
      lineEnding: '\n'
    },
    keySeparator: '.', // Enable nested keys like "button.submit"
    nsSeparator: ':'
  },
  transform: function customTransform(file, enc, done) {
    const parser = this.parser;
    const content = fs.readFileSync(file.path, enc);
    
    // Scan for t() hook calls
    parser.parseFuncFromString(content, {
      list: ['t', 'i18next.t', 'this.t']
    }, (key, options) => {
      parser.set(key, options);
    });
    
    // Scan for Trans components
    parser.parseTransFromString(content, (key, options) => {
      parser.set(key, options);
    });
    
    done();
  }
};

Step 3: Define messages inline in code #

Instead of writing JSON first, define your messages directly in components:

function HomePage() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('home.welcome')}</h1>
      <Trans>home.intro</Trans>
    </div>
  );
}

Step 4: Run the scanner to extract messages #

Add a script to your package.json:

{
  "scripts": {
    "extract:i18n": "i18next-scanner --config i18next-scanner.config.js"
  }
}

Execute it with:

npm run extract:i18n

This will generate JSON files in public/locales/en/translation.json and public/locales/es/translation.json with your extracted keys, ready for you to add translations.

Step 5: Load extracted JSON files in your i18n config #

Update i18n.js to load the JSON files using i18next-http-backend:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend) // Load translations from JSON files
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json' // Path to your JSON files
    }
  });

export default i18n;

This workflow mirrors react-intl's approach perfectly—define messages in code first, then extract and translate them later.

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