如何在ReactJs中渲染重音？

Question

我正在尝试渲染一个元素,内容重音字符,使用ReactJS和JSX,但它不会返回我想要的

我的JSX:

var Orcamento = React.createClass({
    render: function() {
        return (
            <div>
                <h1>Orçamento</h1>

            </div>
        );
    }
});

React.render(
    <Orcamento/>,
    document.getElementById("orcamento")
);

我呈现的javascript:

var Orcamento = React.createClass({displayName: "Orcamento",
    render: function() {
        return (
            React.createElement("div", null, 
                React.createElement("h1", null, "Orçamento")

            )
        );
    }
});

React.render(
    React.createElement(Orcamento, null),
    document.getElementById("orcamento")
);

我在浏览器中的结果:

Orçamento

我已<meta charset="UTF-8">在您的head标记中设置,重音字符在页面标题和页面正文中工作,如果此单词在您的内容中直接输入,但在呈现时不起作用ReactJs

我该如何解决这个问题？

Answer 1

您所看到的，Orçamento它是 UTF-8 字节数组以 ASCII 呈现的结果，可能是代码页 ISO 8859-1。

ReactJS 不支持 HTML 中的非 ASCII 字符。

尝试这个：

var Orcamento = React.createClass({
    render: function() {
        return (
            <div>
                <h1> { 'Orçamento' } </h1>

            </div>;
        );
    }
});

或者干脆替换orçamento为Orçamento.

这在JSX gotchas 中有很好的解释。

Answer 2

我解决了!问题是因为我正在编译JSX使用gulp,而生成的文件不是UTF-8,所以我保存为文件UTF-8就可以了!