TypeScript环境下如何用React-Intl的FormattedMessage设置输入框占位符

嘿，我懂你在TypeScript环境下用React-Intl遇到的麻烦——原来那套依赖propTypes的写法在TS里完全不管用，没法正确注入intl来处理InputPass的占位符格式化。别着急，下面给你两种常用的解决方案，适配不同组件类型：

方案一：函数组件用useIntl钩子（推荐） #

函数组件下直接用React-Intl提供的useIntl钩子是最简洁的方式，不需要高阶组件包裹：

1. 首先导入钩子：

import { useIntl } from 'react-intl';
import InputPass from './InputPass'; // 替换成你的InputPass组件路径

2. 在组件内获取intl对象，并用formatMessage生成占位符文本：

const YourParentComponent = () => {
  const intl = useIntl();

  return (
    <InputPass 
      placeholder={intl.formatMessage({
        id: 'password.placeholder', // 对应你本地化文件里的消息ID
        defaultMessage: 'Enter password' // 可选：当找不到对应ID时的 fallback 文本
      })}
    />
  );
};

export default YourParentComponent;

方案二：类组件用injectIntl高阶组件 #

如果你还在维护类组件，可以用injectIntl配合TypeScript接口来替代propTypes：

1. 先定义组件Props的TypeScript接口，指定intl的类型：

import { IntlShape } from 'react-intl';
import InputPass from './InputPass';

// 定义组件的Props类型
interface ChildComponentProps {
  intl: IntlShape;
}

2. 用injectIntl包裹组件，并通过泛型指定Props类型：

class ChildComponent extends React.Component<ChildComponentProps> {
  render() {
    const { intl } = this.props;
    return (
      <InputPass 
        placeholder={intl.formatMessage({
          id: 'password.placeholder',
          defaultMessage: 'Enter password'
        })}
      />
    );
  }
}

// 注入intl并导出组件
export default injectIntl<ChildComponentProps>(ChildComponent);

关键注意事项 #

• 确保你的整个应用已经被IntlProvider包裹，否则useIntl或injectIntl都无法获取到国际化上下文。
• 你的本地化消息文件（比如en.json、zh.json）里需要包含对应id的文本，比如：

  {
    "password.placeholder": "Enter password"
  }
  

• TypeScript环境下，propTypes只是运行时检查，TS的静态类型检查完全依赖接口/类型别名，所以一定要用TS的类型定义替代propTypes。

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