Question

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

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

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

无论我在标签前面加了多少个空格，它们都不会出现在结果输出中。我也尝试过使用 个字符，但这些字符会导致输出中显示实际文本。我想我可以使用除了空格之外的其他东西，比如用连字符，点等做前缀，但我真的想要白色空间。

尝试不使用变量，而是直接在label属性中硬编码空格，并再次输出白色空格：

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

如何让白色空间坚持下去？

非常感谢！

Answer 1

使用unicode表示 - '\u00A0' - 在字符串中获取不间断的空格：

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

如果你的源文件的字符编码设置得当，你应该可以通过浏览器的开发者控制台运行上面的字符串并将结果粘贴回你的代码中（然后忘记并想知道为什么它以后工作。）

Jsx在optgroup的标签中荣获白色空间

1 个答案: