reactjs-给定一堆索引，根据需要将不同的className添加到子字符串

Question

对不起，对于Reactjs来说是菜鸟。

从我昨天发布的帖子中

javascript -- converting string to array of tuples

我已经成功地将一个数组数组传递给了前端。

现在我有类似[[0,5,'1'], [7,10,'1'], [12,13,'2']]之类的东西。

数组中的元素为[start_index, end_index, type]，这些索引对应于I love you guys so much I do not want to leave you之类的字符串。

现在我想基于类型在reactjs中添加标签，因此对于索引[0，5），它是类型1，它映射为bold，而[12，13）是类型2 ，例如，映射为绿色。

我的代码有点像

MATCHING_STRING ='我好爱你们，我不想离开你'; GIVEN_ARRAY =“ [[0,5，'1']，[7,10，'1']，[12,13，'2']]”

let idx = GIVEN_ARRAY.replace(/'/g, '"'); //got some single quote to replace to use JSON.parse
idx = JSON.parse(idx)
let idx_start = 0;
let idx_end = 0;
let i = 0;
let to_render;
do {
    if (idx_end < idx[i][0]) {
      to_render += MATCHING_STRING.slice(idx_end, idx[i][0]);
    }
    idx_start = idx[i][0];
    idx_end = idx[i][1];
    let highlight;
    if (idx[i][2] === '1') {
      highlight = 'SOME_CLASSNAME';
    }
    to_render += <b className={highlight}>{MATCHING_STRING.slice(idx_start, idx_end)}</b>;
    i ++;
}
while (i < idx.length);

但这不起作用。似乎reactjs不允许我在代码中编写此代码块。使用<总是存在语法错误。我猜想在to_render中以这种方式添加内容。我该如何解决？这甚至是切片字符串的最佳方法吗？

并且不确定是否很重要，MATCHING_STRING和GIVEN_ARRAY都在一个结构中，我们将其称为TXN，当前代码使用TXN.map((tr, ix) -> (.......)对其进行映射。我尝试将其更改为方括号，以便使用js函数，但这也不起作用。