Question

我正在开发一个React应用程序-当用户输入文本字段时-我希望同一行上的按钮-从“生成”更改为“保存”

<FormattedMessage
    id='generate'
    defaultMessage='Generate'
/>

但是我想要这样的东西

<FormattedMessage
    id='generate'
    defaultMessage={valueName ? 'Save' : 'Generate'}
/>

或其他

<FormattedMessage
    id='generate'
    defaultMessage={valueName.length > 0 ? 'Save' : 'Generate'}
/>

但是当我实现这样的操作时，会出现以下错误

“ [React Intl]消息必须静态可评估才能提取。”

https://github.com/formatjs/react-intl/blob/master/docs/Components.md#formattedmessage

Answer 1

您不能这样做，因为必须静态定义消息。您需要定义两条消息，然后根据您的条件选择一条消息：

const generateMsg = (
  <FormattedMessage id="generate" defaultMessage={"Generate"} />
);

const saveMsg = <FormattedMessage id="save" defaultMessage={"Save"} />;

const msg = valueName ? saveMsg : generateMsg;

我个人更喜欢使用一个抽象这种繁琐语法的小工具：

// Message.js

import React from "react";
import { injectIntl } from "react-intl";

const Msg = injectIntl(({ id, intl }) => intl.formatMessage({ id }));

const msg = ({ id }) => <Msg id={id} />;

export default msg;

用法：

import { defineMessages } from "react-intl";
import msg from './Message';

const messages = defineMessages({
  save: {
    id: "save",
    defaultMessage: "Save"
  },
  generate: {
    id: "generate",
    defaultMessage: "Generate"
  }
})

//...
<p>{msg(valueName ? messages.save : messages.generate)}</p>

Source。

请注意msg只能在React组件内部使用，因为它会返回一个组件本身。这意味着它不能在需要字符串的地方使用，例如本机input的{{1}}`。

反应-设置动态FormattedMessage-错误“消息必须为静态”

1 个答案: