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

Question

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

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

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

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

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

此外，这种方法是否有意义，或者我应该使用不同的字符串来扩展和缩短 .json 中的标签并完成它？

Answer 1

<FormattedMessage id="navigation.what"/> 组件将始终 returns 一个跨度。要从 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

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

React.Intl substring from <FormattedMessage>

javascript

reactjs

internationalization

react-intl