Как сделать акценты в ReactJs?

Question

Я пытаюсь вынести элемент, содержание акценты персонажа, используя ReactJS и JSX, но это не возвращение Я хотел

Мой JSX:

var Orcamento = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1>Orçamento</h1> 

      </div> 
     ); 
    } 
}); 

React.render(
    <Orcamento/>, 
    document.getElementById("orcamento") 
); 

Мой оказал JavaScript:

var Orcamento = React.createClass({displayName: "Orcamento", 
    render: function() { 
     return (
      React.createElement("div", null, 
       React.createElement("h1", null, "Orçamento") 

      ) 
     ); 
    } 
}); 

React.render(
    React.createElement(Orcamento, null), 
    document.getElementById("orcamento") 
); 

И мой результат в браузере:

Orçamento 

Я поставил <meta charset="UTF-8"> в вашем head тег, акцентирует символ работает в заголовке страницы и страницы тела, если это слово набирается прямо в содержании, но не работает, когда он оказывает ReactJs

Как я могу это исправить проблема?

Answer 1

Что вы видите, Orçamento, это результат массива байтов UTF-8, отображаемого в ASCII, возможно, кодовой страницы ISO 8859-1.

ReactJS не поддерживает символы, отличные от ASCII, в HTML.

Попробуйте это:

var Orcamento = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <h1> { 'Orçamento' } </h1> 

      </div>; 
     ); 
    } 
}); 

Или просто заменить orçamento на Orçamento.

Это хорошо объяснено в JSX gotchas.

Answer 2

Я решил! проблема в том, что я компилирую JSX с использованием gulp, а сгенерированный файл - не UTF-8, поэтому я сохраняю файл в UTF-8, который работает!

Answer 3

Также с помощью кодировки UTF-8, попробуйте использовать эту библиотеку: https://github.com/mathiasbynens/he

import { decode } from 'he'; 

class Post extends Component { 
    render() { 
    <h1>{ decode(this.props.post.title) }</h1> 
    } 
}