JSX 文件中的“ ”在某些浏览器中被翻译为“”
Posted
技术标签:
【中文标题】JSX 文件中的“ ”在某些浏览器中被翻译为“”【英文标题】：" " in JSX file being translated to "Â" in some browsers 【发布时间】：2018-02-12 14:57:57 【问题描述】：可能与 UTF8 转换有关，但我不知道转换发生在哪里或为什么发生或如何禁用它：如果我有一个 JSX 文件，其中包含文本 XML 节点中的“ ”，那么当在某些浏览器中呈现节点，结果是“”而不是所需的不间断空间。
研究表明，造成这种情况的直接原因是 unicode 不间断空格 character，U+00A0（而不是我尝试使用的 entity），正在被翻译为 UTF-8 并给出生成的字节序列 0xC2 0x00，然后被解释为 ISO-8859-1。我想做的是阻止这种翻译发生。
这似乎根本不会在桌面浏览器中发生，但我正在开发的应用程序是 Apache Cordova 应用程序，当应用程序安装在移动设备上时会出现问题，所以要么是移动浏览器本身，使用 WebView 而不是独立浏览器的某些方面，或导致它的 Cordova 编译过程的一部分。
我的构建过程也使用了 webpack 和 babel，但我似乎没有任何与字符集处理相关的设置。
显示故障的示例代码：
function startApp ()
ReactDOM.render (<span> </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 作为其编码的现有文档的解决方案感兴趣。
【问题讨论】：
我实际上已经通过将我现有的文档转换为 UTF8 解决了这个问题，但我将保留这个问题，以防有人发现不涉及切换字符编码或黑客攻击的解决方案系统以潜在危险的方式避免该问题。 嗨@jules，你是如何将你的文件翻译成UTF8的？我尝试设置<meta charSet='utf-8' />，但没有解决问题
@mikey - 我使用iconv 来转换文件 - 在这里查看答案：***.com/questions/20263909/… - 然后将我的服务器设置为将“charset=utf-8”添加到内容类型标头(gist.github.com/softprops/741574)。
【参考方案1】：
我也对这个条目有疑问。
检查这个问题：  jsx not working。
你可以危险地使用SetInnerHTML
<div dangerouslySetInnerHTML=__html: 'Select Scenario: ' />
或者
<h1>Code ' '</h1>
【讨论】：
将“dangerouslySetInnerHTML”用于这样的常规目的是一个相当晦涩的解决方案。方法名称中包含“危险”一词是有原因的。第二个建议的解决方案似乎实际上并没有产生一个不间断的空格，而是一个不与第一个合并的第二个空格字符；虽然有时这可能很有用，但我真的确实需要不间断的空格。&nbsp; 转换为Â 显然是一个bug，必须有一些不涉及这种复杂过程的解决方案...？！
同意你我写的是解决方法，我也不喜欢这种行为。
@Jules 这不是错误。 shripadk.github.io/react/docs/jsx-gotchas.html -- 也“危险地”在那里提醒它可能是危险的。但是在这种情况下，简单地包括nbsp&;显然不是。
@Madbreaks - 我没有看到任何表明这不是错误的信息。它明确指出 HTML 实体可以在 JSX 文件中包含的文本中使用（尽管它们不能被动态包含），但是没有记录的（实际上不应该是这种情况）是当输出的字符集HTML 不是 UTF-8，结果是编码错误，根本无法正常工作。
UTF-8 仅在将 unicode 字符直接写入 JS 时才需要考虑。 &nbsp; 不是这样的。 “如果你想在动态内容中显示一个 HTML 实体，你会遇到双重转义问题，因为 React 会转义你正在显示的所有字符串，以默认防止各种 XSS 攻击。” -- 记录在案，而不是错误。以上是关于JSX 文件中的“ ”在某些浏览器中被翻译为“”的主要内容，如果未能解决你的问题，请参考以下文章
在 Safari 中浏览 iCloud Drive 中的文件时，某些应用文件夹被禁用