如何在 ReactJs 中渲染口音？

IT技术 javascript reactjs
2021-04-18 07:38:54

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

我的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

我该如何解决这个问题？

3个回答

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

如果您使用的是 VS 代码或类似代码，请将项目或文件编码更改为 UTF-8
2021-05-26 07:38:54
那对我有用。我用记事本编辑了我的组件文件并保存为 utf-8。
2021-06-22 07:38:54

您所看到的，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&#231;amento.

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

我知道了。你确定 JSX 文件的编码是 UTF-8 吗？
2021-05-24 07:38:54
哪里记录了 ReactJS 不支持非 ASCII 字符？这不在您引用的页面上，我的 OP 代码中的简单演示工作正常：jsfiddle.net/wiredprairie/h2k2ksm3。
2021-05-28 07:38:54
我尝试在元标记中为“iso-8859-1”和“utf-8”设置字符集，并设置浏览器检测自动编码，但也不起作用
2021-05-30 07:38:54
我尝试使用 <h1>{ 'Orçamento' }</h1>，但也不起作用，“Orçamento”对我来说可能不是一个好方法，因为如果我的页面语言是巴西葡萄牙语，每次有口音时，我都无法输入此代码
2021-06-08 07:38:54
是的，JSX 文件和 jsx 编译的 js 文件是 UTF-8
2021-06-12 07:38:54

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

import { decode } from 'he';

class Post extends Component { 
  render() {
    <h1>{ decode(this.props.post.title) }</h1>  
  }
}
其它你可能感兴趣的问题
上一篇使用带有 fetch API 的“no-cors”模式时，请求标头未按预期设置 下一篇弹出菜单呈现在与锚元素不同的位置