Reactjs 反应-设置动态格式化消息-错误“消息必须静态”

我正在使用react应用程序—当用户输入文本字段时—我希望在同一行上有一个按钮—从“生成”更改为“保存”

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

但是我想要这样的东西

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

还是什么

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

但是当我实现类似的东西时，我会得到以下错误

[React Intl]消息必须能够进行静态计算以进行提取

---

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

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

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

const msg = valueName ? saveMsg : generateMsg;

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

// 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>

---

请注意，msg只能在React组件内部使用，因为它返回组件本身。这意味着它不能在需要字符串的地方使用，比如本机输入的splaceholder，但同样适用于`也。

我可能需要将其实现为一个有条件的html片段-{valueName？：}我会接受答案，尽管它有点复杂，因为它被一个按钮包围，有不同的操作