Question

我正在使用的应用程序可以选择为expecifc表单添加自定义字段，而这些字段不支持国际化。但是，由于我们项目中的组件，即使在defaultMessage上添加了FormattedMessage，我们仍然收到以下错误：

[React Intl] Missing message: "Custom Field #01" for locale: "en", using default message as fallback.

这是我们BaseInput的实现方式。

class BaseInput extends Component {
  render() {
    let { id, style, label, required, errorMessage } = this.props;
    let errorClass = errorMessage ? "text-field-error" : "";

    return (
      <div className={errorClass} style={style}>
        <label
          id={`${id}_label`}
          name={`${id}_label`}
          className="ui-outputlabel"
        >
          <FormattedMessage id={label} defaultMessage={label} />
        </label>
        {required && <span className="wms-required-field"> *</span>}
        {this.generateInput()}
        {errorMessage && (
          <div className={"ui-message-error ui-widget ui-corner-all"}>
            <span id={`${id}_error`} className={"ui-message-error-detail"}>
              <FormattedMessage id={errorMessage} />
            </span>
          </div>
        )}
      </div>
    );
  }
}

我知道json没有给定ID的翻译。我遇到的问题是即使添加defaultMessage时控制台上的错误消息。有人对如何解决此问题有任何建议吗？

预先感谢

Answer 1

这是因为json没有针对道具中给出的id进行翻译。只有IntlProvider中定义和提供的翻译可以被翻译，否则将显示默认消息。

Answer 2

您可以通过实现提供程序的 onError 处理程序来防止丢失的消息在控制台中显示为错误。这将覆盖写入控制台的默认行为。你可以选择吞下错误。

<IntlProvider locale={locale} messages={messages} onError={handleTranslationError}>
  ...
</IntlProvider>

处理程序

const handleTranslationError = err => {
  // swallow error
};

带defaultMessage的FormattedMessage在控制台上显示错误

2 个答案: