3

我对 yahoo/react-intl 有疑问，我想以字符串类型制作消息，但是当我使用 FormattedMessage 时，它​​给了我用 span 包裹的消息，这并不酷。我尝试了 formatMessage ，但也没有用。我非常感谢任何帮助或建议这是我的代码：

import React from 'react';
import {FormattedMessage} from 'react-intl';
export default {
    items: [
        {
            name: <FormattedMessage id='app.dashboard'/>,
            url: '/dashboard',
            icon: 'icon-speedometer',
            badge: {
                variant: 'info',
                text: 'New',
            },
        },
        {
            title: true,
            name:  <FormattedMessage id='app.dashboard'/>,
            // optional wrapper object
            wrapper: {
                // required valid HTML5 element tag
                element: 'strong',
                // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
                attributes: {},
            },
            // optional class names space delimited list for title item ex: "text-center"
            class: '',`enter code here`
        },
4

3 回答 3

7

在 jsx 中使用：

它呈现为<span>：

<FormattedMessage id='app.dashboard'/>

它呈现为<option>：

<FormattedMessage id='app.dashboard' children={msg=> <option>{msg}</option>}/>

或者：

<FormattedMessage id='app.dashboard' tagName="option"/>

它被渲染为nothing：

<FormattedMessage id='app.dashboard' children={msg=> <>{msg}</>}/>

或者：

<FormattedMessage  id="app.dashboard">{txt => txt}</FormattedMessage>

要在组件中使用它，您可以formatMessage()这样使用：

const App=()=>{
  const value = intl.formatMessage({ id: 'header.nav.login' });
  return(<div>{value}</>)
}

于 2019-09-17T11:51:57.890 回答
1

鉴于您intl自己注入上下文，然后您可以使用该formatMessage功能。

例如，在您的情况下：

items: [
  { 
    name: intl.formatMessage({id:'app.dashboard'});
  }
]

要进入intl您的组件，您有两种选择：

  1. 从组件的上下文中获取它
  2. 用于injectIntl将其放入您的道具中。

如果你不在一个组件中，它会稍微难一些，但我只是把id格式化的消息放入name，然后在可用的时候使用 react-intl 上下文。在这里，在使用并显示此项目列表的组件中。

于 2017-08-23T05:34:26.340 回答
0

这里的解决方案是将 react-intl 升级到版本 3。

在版本 3 中，<FormattedMesage>（以及类似的其他 react-intl 组件）正在渲染为React.Fragment.

如果你想把它渲染成别的东西，你可以指定textComponentprop on IntlProvider，例如：

<IntlProvider textComponent="span" />

请参阅迁移指南 (v2 -> v3)中的信息。

于 2020-05-14T07:49:23.517 回答