отображать HTML-сущность Superscript в JSX

Question

новый, чтобы реагировать.Я получаю JSON с этим значением

{
"unit": "G/ft²/yr"
}

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

setUnit({
        water_flow_unit: item.unit
      });

<h4 className="baseline-graph-header">
   Unit({Unit.unit})
</h4>

они отображаются как G/ft²/yr, но я хочу, чтобы они были преобразованы.Любая помощь приветствуется.

Answer 1

Лучшее решение, которое я нашел, -

.

<span
 dangerouslySetInnerHTML={{
  __html: `${Unit.unit})`
   }}
 />

Убедитесь, что вы используете его в span или div, иначе вы получите - Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {__html}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив - error

см .: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml