Как сделать сообщение без переноса в span в реаги-intl

Question

У меня есть проблема с Yahoo/ реагировать-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"/>

его рендер на 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 2

Учитывая, что вы вводите intl контекст самостоятельно, тогда вы можете использовать formatMessage функция.

Например, в вашем случае:

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

Получить intl в вашем компоненте у вас есть два варианта:

1. получить его из контекста вашего компонента
2. использование injectIntl чтобы получить это в ваших реквизитах.

---

Если вы не в компоненте, это становится немного сложнее, но я бы просто положил id вместо отформатированного сообщения в name и затем используйте контекст act-intl, когда он доступен. Здесь, в компоненте, который потребляет и отображает этот список элементов.

Answer 3

Решение здесь - обновить react-intl до версии 3.

В версии 3 <FormattedMesage> (и аналогично другие компоненты react-intl) рендерится в React.Fragment.

Если вы хотите отобразить его на что-то еще, вы можете указать textComponent подпирать IntlProvider, например:

<IntlProvider textComponent="span" />

См. Информацию в Руководстве по миграции (v2 -> v3).