我試圖呈現一個元素，內容口音字符，使用ReactJS和JSX，但它不回來時，我想如何在ReactJs中渲染重音符號？

我的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

我已經在你的head標籤設置<meta charset="UTF-8">，重音字符是工作在網頁標題和頁面主體，如果這個詞在你的內容直接輸入，但是當它是由ReactJs

我如何能解決這個問題變得不工作問題？

來源

2015-04-06 Lai32290

我只是複製你的代碼，並提出了的jsfiddle：http://jsfiddle.net/wiredprairie/h2k2ksm3/。它可以像你期望的那樣在那裏工作。 – WiredPrairie 2015-04-06 15:12:46

你看到的是OrÃ§amento，它是UTF-8字節數組以ASCII形式呈現的結果，可能是代碼頁ISO 8859-1。

ReactJS不支持HTML中的非ASCII字符。

試試這個：

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

      </div>; 
     ); 
    } 
});

或者乾脆Orçamento更換orçamento。

這在JSX gotchas中有很好的解釋。

來源

2015-04-06 13:52:42

我嘗試使用

{'Orçamento'}

，但不工作太多，而「或ç amento」可能不是我的好方法，因爲如果我的頁面語言是巴西葡萄牙語，我不能把這個代碼每次有口音 – Lai32290 2015-04-06 14:23:12

我明白了。你確定JSX文件的編碼是UTF-8嗎？ – 2015-04-06 14:30:42

是的，JSX文件和jsx編譯的js文件是UTF-8 – Lai32290 2015-04-06 14:42:21

我解決了！問題是因爲我在使用gulp編譯JSX，而生成的文件不是UTF-8，所以我將其保存爲UTF-8正在使用的文件！

來源

2015-04-06 15:24:21 Lai32290

而且使用的字符集UTF-8，嘗試使用這個庫： https://github.com/mathiasbynens/he

import { decode } from 'he'; 

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

來源

2017-01-12 16:34:36

如何在ReactJs中渲染重音符號？

回答

{'Orçamento'}

相關問題