来自 <FormattedMessage> 的 React.Intl 子字符串答案

【问题标题】：React.Intl substring from <FormattedMessage>来自 <FormattedMessage> 的 React.Intl 子字符串
【发布时间】：2018-05-08 07:22:57
【问题描述】：

我正在使用 i18n 进行我的第一个项目，我遇到了这个问题。我的客户想要一个导航栏，其文本根据当前查看的部分展开。像这样的：

所以对于每个标签，我都使用这样的 FormattedMessages：

<FormattedMessage id="navigation.what"/>
<FormattedMessage id="navigation.how"/>

我从 .json 文件中获取所有字符串。

现在我在想 - 你知道有没有在 FormattedMessage 上使用 .substring 的方法？

这种方法还有什么意义吗，还是我应该在 .json 中使用不同的字符串来扩展和缩短标签并完成它？

【问题讨论】：

标签： javascript reactjs internationalization react-intl

【解决方案1】：

<FormattedMessage id="navigation.what"/> 组件将始终返回一个跨度。要从react-intl 获取字符串，您应该使用formatMessage() 函数。你可以像下面这样使用它：

使用injectIntl 高阶组件注入 Intl：

import { injectIntl } from 'react-intl';

@injectIntl
class YourComponent extends Component {
...
render () {
...
  const {formatMessage} = this.props.intl;
...
  <span>{formatMessage(navigation.how).substring()}</span>

通过此函数了解更多详情： formatMessage()

Usage example

【讨论】：