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

我解决了！问题是因为我正在使用JSX编译gulp，而生成的文件不是UTF-8，因此我将UTF-8中的文件保存为正常工作！

Answer 2

你看到的是OrÃ§amento，它是用ASCII渲染的UTF-8字节数组的结果，可能是代码页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 3

同样使用charset utf-8，尝试使用此库： https://github.com/mathiasbynens/he

import { decode } from 'he';

class Post extends Component { 
  render() {
    <h1>{ decode(this.props.post.title) }</h1>  
  }
}

如何在ReactJs中渲染重音？

3 个答案: