React Javascript 显示/解码 unicode 字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35166758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Javascript displaying/decoding unicode characters
提问by barracuda
I have a string in unicode that i need to convert. I need to render the string with \u00f3 to ó. This is an example, it should happen with all other types of characters, á, í, ú...
我有一个需要转换的 unicode 字符串。我需要将带有 \u00f3 的字符串渲染为 ó。这是一个例子，它应该发生在所有其他类型的字符上，á、í、ú...
I have the following basic code: https://jsfiddle.net/dddf7o70/
我有以下基本代码：https: //jsfiddle.net/dddf7o70/
I need to convert
我需要转换
<Hello name="Informaci\u00f3n" />
into
进入
Información
采纳答案by Mike 'Pomax' Kamermans
If you have to work with strings that have, for whatever reason, those \u....codes in them instead of being real letters, convert them to numbers, and then use String.fromCharCode() to turn those numbers into real letters. We can use a regexp replace with handler function for this:
如果您必须处理由于某种原因包含这些\u....代码而不是真正字母的字符串，请将它们转换为数字，然后使用 String.fromCharCode() 将这些数字转换为真正的字母。我们可以使用正则表达式替换处理程序函数：
function convertUnicode(input) {
return input.replace(/\u(\w\w\w\w)/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')
);
Fiddle: https://jsfiddle.net/dddf7o70/4/
回答by zerkms
Just pass it as a JS string:
只需将其作为 JS 字符串传递：
<Hello name={'Informaci\u00f3n'} />
No need to do any manual processing (which is error prone).
无需进行任何手动处理（容易出错）。
Fiddle: https://jsfiddle.net/dddf7o70/5/
回答by Larmia
React converts unicode automatically with the dangerouslySetInnerHTMLattribute.
React 使用危险的SetInnerHTML属性自动转换Unicode 。
See for more info: https://reactjs.org/docs/dom-elements.html
有关更多信息，请参阅：https: //reactjs.org/docs/dom-elements.html
export default class Hello extends Component {
render() {
return (
<div>
<div dangerouslySetInnerHTML={{ __html: this.props.name}}></div>
</div>
);
}
}
回答by T.Woody
To put the unicode write in your render()and jsx, you can just:
要将 unicode 写入您render()和jsx，您可以：
<div>{'First \u00b7 Second'}</div>
, or
， 或者
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
If doing this with libraries and other fonts, be sure that your font is imported first, make sure that you are using font-family: myFont(i.e. "Font Awesome 5 Free"). And make sure that the unicode that you are using is accurate.
如果使用库和其他字体执行此操作，请确保首先导入您的字体，确保您正在使用font-family: myFont（即"Font Awesome 5 Free"）。并确保您使用的 unicode 是准确的。
回答by lama12345
Question title leads to this questions around React unicode issues, and sometimes simply this metatag is needed:
问题标题导致了围绕 React unicode 问题的这个问题，有时只meta需要这个标签：
<html>
<head>
<meta charset="UTF-8">
</head>
</html>
