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 的 class 中，所以它不是一个组件或类似的东西它也是一个 .ts 文件而不是 .tsx

Answer 1

Return 有效的 JSX，不是数组：

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

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

Typescript/React `<span>Text</span>`only writes out the text and not element

string-interpolation

typescript

reactjs

preact