Typescript/React `<span>Text</span>`只写出文本而不是元素

Question

我有一个非常简单的函数，它可以分割一个字符串并在中间放置一个样式跨度，因为我想要一些样式文本，它看起来像这样

splitAndApplyStyledContent(content: string, textType: string, separator: string) {
  const splittedContent = content.split(separator);

  switch (textType) {
    case 'Info':
      return [
        splittedContent[0],
        `<span className="styled-text">${this.getString(Name)}</span>`,
        splittedContent[1],
      ];
    default:
      return content;
  }
}

这里的问题是当我在我的 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]}
  </>
)
...