如何在react-intl中不包裹跨度的情况下制作消息

Question

我对 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`
        },

Answer 1

在 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()像这样使用：

<FormattedMessage id='app.dashboard'/>

Answer 2

既然你intl自己注入了上下文，那么你就可以使用该formatMessage函数了。

例如，在你的情况下：

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

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

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

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