Typescript / React `<span> Text </span>` записывает только текст, а не элемент

Question

У меня есть довольно простая функция, которая разделяет строку и помещает диапазон стилей посередине, так как мне нужен какой-то стилизованный текст, он выглядит так это в моем tsx-файле, например

{ props.myStringManager.splitAndApplyStyledContent(props.myStringManager.getString(infoContent), "Info" , '{X}')}

, он также запишет часть <span className="styled-text"> </span> вместо того, чтобы превращать его в элемент и применять к нему стиль

Чтобы уточнить, что эта функция находится внутри класс, который выглядит как export default class LocalizationsManager, поэтому это не компонент или что-то в этом роде, это также файл .ts, а не .tsx

Answer 1

Вернуть действительный JSX, а не массив:

...
return (
  <>
    {splittedContent[0]}
    <span className='styled-text'>{this.getString(Name)}</span>
    {splittedContent[1]}
  </>
)
...