Reactjs JSX将嵌入变量转换为字符串

我正在尝试基于整数值动态生成一些空空间

我认为以下方法可行：

function createTab(level) {

    let y = "";

    for (let i = 0; i < level; i++) {
        y = y + " &nbsp; ";
    }

    let x = <span>{y}</span>;
    return x
}

然而，JSX在引用span元素中的y值时呈现了这一点。报价将导致文本显示

---

我做错了什么？

我需要使用unicode字符\u00A0，它可以工作：

function createTab(level) {

    let y = "";

    for (let i = 0; i < level; i++) {
        y = y + " \u00A0 ";
    }

    let x = <span>{y}</span>;
    return x
}

---

JSX似乎不喜欢HTML代码

如果确实需要此功能，请尝试使用。由于存在漏洞，有时直接呈现HTML不是一个好主意。默认情况下，React在渲染前转义字符串。嗯……那么如何在React中生成空格？考虑到代码中的最小更改和我之前的注释，函数的最后一部分可以重写为return，可能这个问题也与