React-Intl与JSON：能否在单个字符串中使用多个翻译键？

嘿，这个问题问到点子上了！我在React-Intl的国际化项目里经常碰到类似需求，直接说结论：React-Intl本身不支持在翻译JSON字符串里直接引用其他翻译键，但我们可以通过代码层面的处理来实现你想要的效果，下面给你两种实用方案：

方案一：基础参数传递法 #

先在组件中获取需要引用的翻译值，再将其作为参数传递给目标翻译消息。

翻译JSON文件 #

{
  "test1": "ABC",
  "test2": "CBA",
  "result": "test {test1}"
}

组件代码（hooks方式） #

import { useIntl } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  // 先获取test1的翻译值
  const test1Value = intl.formatMessage({ id: 'test1' });
  // 将test1Value作为参数传入result的格式化调用
  const resultText = intl.formatMessage({ id: 'result' }, { test1: test1Value });
  
  return <div>{resultText}</div>;
}

方案二：多键嵌套的灵活处理 #

如果需要同时引用多个翻译键，比如result要同时包含test1和test2，只需要扩展参数即可：

翻译JSON文件 #

{
  "test1": "ABC",
  "test2": "CBA",
  "result": "test {test1} and {test2}"
}

组件代码（hooks方式） #

import { useIntl } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  const resultText = intl.formatMessage(
    { id: 'result' },
    {
      test1: intl.formatMessage({ id: 'test1' }),
      test2: intl.formatMessage({ id: 'test2' })
    }
  );
  
  return <div>{resultText}</div>;
}

方案三：用FormattedMessage组件实现 #

如果你更倾向于用组件式写法而非hooks，FormattedMessage同样支持传递包含其他翻译的参数：

import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <FormattedMessage
      id="result"
      values={{
        test1: <FormattedMessage id="test1" />,
        test2: <FormattedMessage id="test2" />
      }}
    />
  );
}

补充说明：为什么不能直接在JSON里引用？ #

React-Intl的消息格式化基于ICU Message Format规范，它只会解析你显式传递给formatMessage或FormattedMessage的参数，不会自动扫描翻译JSON文件中的其他键并替换。所以必须在代码层面先获取到目标翻译值，再作为参数传入。

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