React Javascript 显示/解码 unicode 字符答案

【问题标题】：React Javascript displaying/decoding unicode charactersReact Javascript 显示/解码 unicode 字符
【发布时间】：2016-02-03 01:08:01
【问题描述】：

我有一个需要转换的 unicode 字符串。我需要将带有 \u00f3 的字符串渲染为ó。这是一个例子，它应该发生在所有其他类型的字符上，á、í、ú...

我有以下基本代码： https://jsfiddle.net/dddf7o70/

我需要转换

<Hello name="Informaci\u00f3n" />

进入

Información

【问题讨论】：

为什么？ React 和 JavaScript 可以很好地处理 Unicode，为什么不直接输入你需要输入的内容呢？（文档建议 \u... 符号仅作为普遍安全的选择，但到目前为止，Unicode 是相当普遍安全的）
我需要转换它的原因是因为其他人正在给我输入字符串：Informaci\u00f3n
所以这个问题根本与 React 无关，而是“如何将带有 \u... 符号的字符串转换为 JavaScript 中的纯字符串”？因为jsfiddle.net/dddf7o70/3（带有真实的字符串内容）在 React 中运行良好。你是怎么得到这些字符串的？您似乎不太可能获得尚未解析 \u.... 标记的字符串...

标签： javascript reactjs

【解决方案1】：

只需将其作为 JS 字符串传递：

<Hello name={'Informaci\u00f3n'} />

无需进行任何手动处理（容易出错）。

小提琴：https://jsfiddle.net/dddf7o70/5/

【讨论】：

感谢 zerkms，您的提琴手工作但由于某种原因做出反应或我的项目中的某些东西阻止了这种转换的发生。你知道可能是什么原因吗？
@barracuda React 不能“阻止”它 - 大括号 { } 之间的任何内容都被解释为纯 JS。我建议你先检查一下 jsx 被翻译成什么。

【解决方案2】：

如果您必须使用字符串，无论出于何种原因，这些字符串实际上包含 \u.... 代码而不是真正的字母，请将它们转换为数字，然后使用 String.fromCharCode() 将这些数字转换为真实的字母。为此，我们可以使用正则表达式替换处理函数：

function convertUnicode(input) {
  return input.replace(/\\u[0-9a-fA-F]{4}/g,function(a,b) {
    var charcode = parseInt(b,16);
    return String.fromCharCode(charcode);
  });
}

var Hello = React.createClass({
  getInitialState: function() {
    return {
      name: convertUnicode(this.props.name)
    };
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

React.render(
  <Hello name="Informaci\u00f3n" />,
  document.getElementById('container')
);

小提琴：https://jsfiddle.net/cq7o4zgb/

【讨论】：

【解决方案3】：

React 使用 dangerouslySetInnerHTML 属性自动转换 unicode。

查看更多信息：https://reactjs.org/docs/dom-elements.html

export default class Hello extends Component {

render() {
    return (
        <div>
            <div dangerouslySetInnerHTML={{ __html: this.props.name}}></div>
        </div>
    );
  }
}

【讨论】：

【解决方案4】：

要将 unicode 写入您的 render() 和 jsx，您可以：

<div>{'First \u00b7 Second'}</div>

，或

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

如果对库和其他字体执行此操作，请确保首先导入您的字体，并确保您使用的是font-family: myFont（即"Font Awesome 5 Free"）。并确保您使用的 unicode 是准确的。

【讨论】：

【解决方案5】：

问题标题引出了这个关于 React unicode 问题的问题，有时只需要这个 meta 标签：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
</html>

【讨论】：