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

假设您自己注入intl上下文，那么您可以使用formatMessage函数。

例如，在您的情况下：

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

要在您的组件中获得intl，您有两种选择：

从您的组件的上下文中获取
使用injectIntl将其添加到道具中。

如果您不在某个组件中，它会稍微困难但我只需将id而不是格式化的消息放在name中，然后在可用时使用react-intl上下文。此处，在使用和显示此项列表的组件中。

Answer 2

用于jsx：

将其呈现到<span>：

<FormattedMessage id='app.dashboard'/>

将其呈现到<option>：

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

或者您可以使用此

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

将其呈现到noting：

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

或使用此

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

用于在组件中定义：您可以像这样使用api formatMessage：

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

Answer 3

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

在版本3中，<FormattedMesage>（和其他类似的react-intl组件）正在呈现到React.Fragment中。

如果要将其渲染为其他内容，可以在textComponent上指定IntlProvider prop，例如：

<IntlProvider textComponent="span" />

查看Migration Guide (v2 -> v3)中的信息。

如何在react-intl中不包含span的情况下发送消息

3 个答案: