你如何将参数传递给react-intl中的defineMessages？

Question

我收到如下错误消息：

Could not retrieve data: ${e}

如何将其转换为可以接受此错误参数的 definedMessage？

一个标准定义的消息：

    const messages = defineMessages({
     dataError: {
         id: 'data.error',
         defaultMessage: 'Could not retrieve data: [default message]'
     }
   })

谢谢！

Answer 1

如果我这样理解正确的话：

const messages = defineMessages({
  dataError: {
    id: 'data.error',
    defaultMessage: 'Could not retrieve data: {message}'
  }
})

<FormattedMessage
  {...messages.dataError}
  values={{message: `Could not retrieve data: ${e}`}}
/>

Answer 2

需要用 {e} 替换 defineMessages

中的 [default message]

const messages = defineMessages({
  dataError: {
    id: 'data.error',
    defaultMessage: 'Could not retrieve data: {e}'
  }
})

定义消息变量

 const message = "Error Message";

在格式化消息中传递消息变量

 <FormattedMessage
          {...messages.dataError}
          values={{ e: `${message}` }}
 />

Out 放在下面

<span>Could not retrieve data: Error Message</span>

希望对您有所帮助。

Answer 3

这个可以做得更简单。例如其中 'launcher.question' 可能类似于

'launcher.question': 'Dear {e} tell us about' <--- 这在您的 IntlProvider 消息定义中。

你如何将参数传递给react-intl中的defineMessages？

How do you pass a parameter to defineMessages in react-intl?

javascript

reactjs

react-intl