Reactjs 将元素推送到数组

从我从互联网上得到的信息来看，这个功能应该可以工作。但是，babel未能编译它，因为引用了无效的令牌。如果我把推线注释掉，一切都会正常

有人能帮我用正确的语法来做这件事吗

renderSuggestionText(highlightText, text) {
  const fragments = [];

  let buffer = text;
  while (buffer.length > 0) {
    const fragmentStart = text.toUpperCase().indexOf(highlightText.toUpperCase());
    if (fragmentStart > 0) {
      fragments.push(<span>{buffer.substr(0, fragmentStart)}<span>);
      fragments.push(<span className="bold">{buffer.substr(fragmentStart, highlightText.length)}</span>);

      buffer = buffer.substr(fragmentStart + highlightText.length);
    } else {
      fragments.push(<span>{buffer}<span>);
      buffer = '';
    }
  }

  return fragments;
}

renderSuggestionText（高亮文本，文本）{
常量片段=[]；
让缓冲区=文本；
while（buffer.length>0）{
const fragmentStart=text.toUpperCase（）.indexOf（highlightText.toUpperCase（））；
如果（碎片开始>0）{
push（{buffer.substr（0，fragmentStart）}）；
push（{buffer.substr（fragmentStart，highlightText.length）}）；
buffer=buffer.substr（fragmentStart+highlightText.length）；
}否则{
push（{buffer}）；
缓冲区=''；
}
}
返回碎片；
}

某些span标记上存在语法错误。您需要确保关闭所有标记（

），例如：

} else {
  fragments.push(<span>{buffer}<span>);
  buffer = '';
}

}其他{
push（{buffer}）；
缓冲区=''；
}

如果您未能关闭所有标记，Babel将始终抛出错误。应该类似于“未终止的JSX…”

应改为：

  fragments.push(<span>{buffer}</span>);

fragments.push（{buffer}）；

巴贝尔在抱怨哪种代币<代码>grr。愚蠢的错误。谢谢