Как вставить HTML-тег с injectIntl ​​formatMessage с использованием React-Intl?

Question

У меня проблема с реагирующим пакетом.Я использую способ injectIntl ​​для использования реквизита в компоненте.Чистая строка в порядке, но она не будет работать, если я оберну тег HTML.

Случай успеха с чистой строкой

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: basket.table }
);
//console -> Table 1

Чистая строка с тегом HTMLНеудачный случай

const _tableNoText = intl.formatMessage(
    { id: 'footer.table_no' },
    { value: <b>basket.table</b> }
);
// console -> Table [object object]

Если я поменяю formatMessage на formatHTMLMessage, он выдаст тот же результат, что и выше, как мне это исправить?

Спасибо всем большое.

Answer 1

Когда вы используете { value: <b>basket.table</b> }, вы фактически создаете компонент React b, который представляет собой обычный объект JavaScript.Этот шаг просто скрыт от вас tsx (или jsx) компилятором.

Так что если вы хотите визуализировать HTML, вам нужно обернуть настоящую строку HTML в кавычки, затем перевести строку и затем позволитьРеагируйте развернуть (или превратить) строку HTML в элементы DOM.

const translated = intl.formatMessage(
  { id: 'footer.table_no' },
  { value: '<strong>STRONG</strong>' }
);

return (
  <div dangerouslySetInnerHTML={{__html: translated}} />
)

Если вы хотите интерполировать basket.table, просто передайте ее как другое значение:

...
{
  value: '<strong>STRONG</strong>',
  table: basket.table,
}