2016-09-12 5 views
0

私のテストコンポーネントでは、私は2つのアイコンを描画します。最初のものでは "i"要素に内容を書きます。私は変数を定義し、次に{}で値を取得します。 '&#xe64c'はアイコンのコードです。react.jsの角括弧と文字列の違いは何ですか

結果:最初のアイコンが正しく表示されます。 2番目のアイコンにはアイコンが表示されません。なぜ私に教えてくれるの?

ありがとうございました。

class Test extends Component{ 
    render(){ 
    let iconCode = '&#xe64c'; 

    return (
     <div> 
     <i className="iconfont">&#xe64c;</i> 
     <i className="iconfont">{iconCode}</i> 
     </div> 
    ); 
    } 
} 

CSSのコードは次のとおりです。

@font-face { 
    font-family: 'iconfont'; 
    src: url('../img/iconfont.eot'); 
    /* IE9*/ 
    src: url('../img/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../img/iconfont.woff') format('woff'), /* chrome、firefox */ url('../img/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../img/iconfont.svg#iconfont') format('svg'); 
    /* iOS 4.1- */ 
} 
.iconfont { 
    font-family: "iconfont" !important; 
    font-size: 16px; 
    font-style: normal; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-stroke-width: 0.2px; 
    -moz-osx-font-smoothing: grayscale; 
} 
+0

JavaScriptについて質問しているときに、なぜJavaタグですか? – GhostCat

+0

私のミスに申し訳ありません –

答えて

0

あなたは、単にあなたのlet割り当てにセミコロンが欠落しています

class Test extends Component{ 
    render(){ 
    let iconCode = '&#xe64c;'; 

    return (
     <div> 
     <i className="iconfont">&#xe64c;</i> 
     <i className="iconfont">{iconCode}</i> 
     </div> 
    ); 
    } 
} 

コードが完全な値&#xe64c;なければなりません。最後のセミコロンはコードの一部です。

関連する問題