“”在某些浏览器中,JSX文件被翻译为“”

时间:2017-09-04 11:18:23

标签: reactjs cordova webpack character-encoding jsx

可能与UTF8转换有关,但我不知道转换发生的位置或原因或者如何禁用它:如果我在文本XML节点中有一个包含“ ”的JSX文件,那么当某个节点在某些浏览器中呈现 时,结果为“”而不是所需的非中断空间。

研究表明,造成这种情况的直接原因是unicode不间断空间字符,U + 00A0(而不是我试图使用的实体),正在被转换为UTF-8并给出结果字节序列0xC2 0x00,然后被解释为ISO-8859-1。我想做的是阻止这种翻译。

这在桌面浏览器中似乎根本不会发生,但我正在开发的应用程序是Apache Cordova应用程序,当应用程序安装在移动设备上时会出现问题,因此无论是移动浏览器本身,使用WebView而不是独立浏览器的某些方面,或者导致它的Cordova编译过程的一部分。

我的构建过程也使用webpack和babel,但我似乎没有任何与字符集处理相关的设置可能与此相关。

显示错误的示例代码:

function startApp () {
    ReactDOM.render (<span>&nbsp;</span>, document.getElementById('app'));
}
if (typeof document !== "undefined") document.addEventListener ("deviceready", startApp, false);

HTML文件:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' http://www.randomtext.me;
        script-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' connect.facebook.net;
        style-src 'self' 'unsafe-inline';
        media-src *;
        img-src *;
        frame-src  'self' gap: *.facebook.com;
        connect-src * data:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <style type="text/css">
        @font-face {
            font-family: "OpenSans-Regular";
            src: url("fonts/OpenSans-Regular.ttf") format("truetype");
        }
        @font-face {
            font-family: "OpenSans-Italic";
            src: url("fonts/OpenSans-Italic.ttf") format("truetype");
        }
        @font-face {
            font-family: "OpenSansCondensed-Light";
            src: url("fonts/OpenSansCondensed-Light.ttf") format("truetype");
        }
        @font-face {
            font-family: "OstrichSans-Medium";
            src: url("fonts/OstrichSans-Medium.otf") format("truetype");
        }
    </style>
</head>

<body><div class="Fill" id="app"></div></body>

<script type="text/javascript" src="js/styles.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</html>

更新

我发现this blog post其他人经历过此事。建议的解决方案是使用:

<meta charset="utf-8">
index.html中的

。这个 会像我描述的那样解决问题,但我也对一个不会阻止渲染使用ISO-8859-1作为编码的现有文档的解决方案感兴趣。

1 个答案:

答案 0 :(得分:3)

我也对这些条目有疑问。

请检查此问题:&nbsp jsx not working

您可以使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{__html: 'Select Scenario: &nbsp;'}} />

<h1>Code {' '}</h1>