如何在 ReactJs 中渲染口音? [英] How to render accents in ReactJs?

问题描述

我正在尝试使用 ReactJS 和 JSX 渲染一个带有重音字符的元素，但它没有返回我想要的.

我的 JSX:

var Orcamento = React.createClass({渲染:函数(){返回 (<div><h1>Orçamento</h1>

);}});反应.render(<Orcamento/>,document.getElementById("orcamento"));

我渲染的javascript:

var Orcamento = React.createClass({displayName: "Orcamento",渲染:函数(){返回 (React.createElement("div", null,React.createElement("h1", null, "Orçamento")));}});反应.render(React.createElement(Orcamento, null),document.getElementById("orcamento"));

我在浏览器中的结果:

Orçamento

我在我的索引文件中的 head 标签中设置了 <meta charset="UTF-8">，重音字符在页面标题和正文中起作用如果这个词是直接在页面内容中输入的，但是当它被 ReactJs

渲染时不起作用

我该如何解决这个问题?

解决方案

你所看到的，Orçamento，这是 UTF-8 字节数组以 ASCII 格式呈现的结果，可能是代码页 ISO8859-1.

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

试试这个:

var Orcamento = React.createClass({渲染:函数(){返回 (<div><h1>{ 'Orçamento' } </h1>

;);}});

或者简单地将 orçamento 替换为 Orçamento.

这在 JSX 问题中有很好的解释.

I'm trying render an element which has an accent character using ReactJS and JSX, but it's not returning what I wanted.

My JSX:

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

            </div>
        );
    }
});

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

My rendered 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")
);

And my result in browser:

Orçamento

I've set <meta charset="UTF-8"> in my index file inside the head tag, accent characters works in page title and body if this word is typed direct in page content, but is not working when it's rendered by ReactJs

How can I fix this problem?

解决方案

What you see, Orçamento, it's a result of a UTF-8 byte array being rendered in ASCII, probably codepage ISO 8859-1.

ReactJS doesn't support non-ASCII characters within HTML.

Try this:

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

            </div>;
        );
    }
});

Or simply replace orçamento by Orçamento.

This is well explained in the JSX gotchas.

这篇关于如何在 ReactJs 中渲染口音?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！