JSX преобразует встроенные переменные в строки

Question

Я пытаюсь динамически генерировать пустое пространство на основе целочисленных значений.

Я думал, что будет работать следующее:

function createTab(level) {

    let y = "";

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

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

Однако JSX отображает это в кавычках значения y в элементах span.В результате цитирования отображается в виде текста.

что я делаю не так?

Answer 1

Мне нужно использовать символ 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-коды