React - 设置动态 FormattedMessage - 错误 "Messages must be statically"

Question

我正在开发一个 React 应用程序 - 当用户输入文本字段时 - 我想要同一行上的按钮 - 从 'generate' 更改为 'save'

<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

您不能那样做，因为必须静态定义消息。您需要定义两条消息，然后根据您的情况 select 定义一条消息：

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 组件内部使用，因为它 returns 本身就是一个组件。这意味着它不能用在需要字符串的地方，比如原生的 input'splaceholder, but the same applies to`。

React - 设置动态 FormattedMessage - 错误 "Messages must be statically"

React - setting up dynamic FormattedMessage - error "Messages must be statically"

reactjs

react-intl