React Javascript, отображающий/декодируя символы юникода

У меня есть строка в Юникоде, которую мне нужно преобразовать. Мне нужно отобразить строку с \u00f3 до -. Это пример, это должно происходить со всеми другими типами символов: á, í, ú...

У меня есть следующий базовый код: https://jsfiddle.net/dddf7o70/

Мне нужно преобразовать

<Hello name="Informaci\u00f3n" />

Información

Ответ 1

Если вам нужно работать со строками, которые по какой-либо причине содержат эти коды \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')
);

Скрипка: https://jsfiddle.net/dddf7o70/4/

Ответ 2

Просто передайте его как строку JS:

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

Не нужно выполнять ручную обработку (которая подвержена ошибкам).

Fiddle: https://jsfiddle.net/dddf7o70/5/

Ответ 3

React автоматически преобразует Юникод с помощью атрибута dangerouslySetInnerHTML.

Смотрите для получения дополнительной информации: 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"). И убедитесь, что используемый вами юникод является точным.