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

У меня проблема с пакетом react-intl. Я использую способ injectIntl ​​для использования реквизита в компоненте. Pure String — это хорошо, но это не сработает, если я оберну 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, он выведет тот же результат, что и выше, как мне это исправить?

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


reactjs javascript react-intl
person tommychoo    schedule 20.03.2019    source источник
comment
Каково ваше console.log утверждение?   -  person Jack Bashford    schedule 20.03.2019
comment
@JackBashford просто console.log(_tableNoText)   -  person tommychoo    schedule 20.03.2019

Ответы (1)


arrow_upward
5
arrow_downward

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

Поэтому, если вы хотите отображать HTML, вам нужно заключить фактическую строку HTML в кавычки, затем перевести строку, а затем позволить React развернуть (или превратить) строку 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,
}
person martin    schedule 28.03.2019
comment
Спасибо, я использую этот способ, ха-ха - person tommychoo; 10.04.2019