如何在 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

我在我的索引文件中的 head 标签内设置了 <meta charset="UTF-8">，重音字符在页面标题中起作用，body 如果这个词是直接在页面内容中键入的，但是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

我解决了！问题是因为我正在使用 gulp 编译 JSX，并且生成的文件不是 UTF-8，所以我将文件另存为正在工作的 UTF-8！

Answer 3

同样使用字符集 utf-8，尝试使用这个库： https://github.com/mathiasbynens/he

import { decode } from 'he';

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

如何在 ReactJs 中渲染口音？

How to render accents in ReactJs?

javascript

reactjs