optgroup 标签中的 Jsx honor white space

Question

我是 React 的新手，现在已经尝试了几个小时让我的 React 组件从 JSX 渲染以尊重 <optgroup> 元素标签的白色 space 属性 .归结为希望这些标签通过白色 space 用法缩进一点。

这是渲染函数的一个非常基本的例子：

    render: function () {
    var theLabel = "               OptionGroup Label";
    return (
        <select>
            <optgroup label={theLabel}>
                <option value="1">1</option>
            </optgroup>
        </select>
        )
}

无论我在标签前加上多少 space，它们都不会出现在结果输出中。我也尝试过使用   个字符，但这些字符会导致在输出中显示实际文本。我想我可以改用白色 space 以外的其他东西，例如用连字符、点等作为前缀，但我真的想要白色 space.

尝试不使用变量，而是像这样直接在标签属性中硬编码 spaces，并且白色 spaces 不会出现在输出中：

    render: function () {
    return (
        <select>
            <optgroup label="               OptionGroup Label">
                <option value="1">1</option>
            </optgroup>
        </select>
        )
}

我怎样才能让白色的space粘上去？

非常感谢！

Answer 1

使用 unicode 表示 - '\u00A0' - 将不间断的 space 转换为字符串：

var theLabel = "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0OptionGroup Label";

如果您的源文件的字符编码设置正确，您应该能够通过浏览器的开发人员控制台运行上面的字符串并将结果粘贴回您的代码（然后忘记并想知道为什么有时它会起作用稍后）。

optgroup 标签中的 Jsx honor white space

Jsx honor white space in optgroup's label

reactjs

react-jsx