<FormattedMessage /> возвращает строку без каких-либо тегов

Question

Терпите меня, я не знаю, как объяснить эту проблему.

Я использую таблицу начальной загрузки для отображения моих данных, у меня есть searchFilters, сортировка и многие другие функции в таблице.

Когда я начал внедрять интернационализацию, я начал с форматирования непосредственно в текстовом компоненте, когда я начал получать слишком много столбцов и таблиц, я переместил имена столбцов во внешние файлы, которые читаются по необходимости. Мне также нужно было добавить динамический перевод, как вы можете видеть в headerFormatter.

Проблема в том, что библиотека react-intl добавляет на визуализацию теги <span>, из-за чего другие теги <span> не работают должным образом.

const headerFormatter = (col, colIndex) => {
    return ( 
        <FormattedMessage id={col.text} key={colIndex} />
    );
}
//Column Example
{dataField: 'agentNo',text: 'AgentNo', headerFormatter: headerFormatter, filter: textFilter({defaultValue:''}), sort: true},

Есть ли способ заставить <FormattedMessage /> вернуть только string в этом сценарии?

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ

отформатированный:

<span>Date</span>

неотформатированный:

AgentNo
<span class="react-bootstrap-table-sort-order dropup"><span class="caret"></span></span>

Это <span> сокрушено <span> из <FormattedMessage />

Answer 1

Мы решили реорганизовать и использовать функцию formatMessage, которая основана на контексте

Answer 2

Вы можете добавить свои классы в компонент FormattedMessage следующим образом:

const headerFormatter = (col, colIndex) => {
    return ( 
        <FormattedMessage className="react-bootstrap-table-sort-order dropup" id={col.text} key={colIndex} />
    );
}