0
私のテストコンポーネントでは、私は2つのアイコンを描画します。最初のものでは "i"要素に内容を書きます。私は変数を定義し、次に{}で値を取得します。 '&#xe64c'はアイコンのコードです。react.jsの角括弧と文字列の違いは何ですか
結果:最初のアイコンが正しく表示されます。 2番目のアイコンにはアイコンが表示されません。なぜ私に教えてくれるの?
ありがとうございました。
class Test extends Component{
render(){
let iconCode = '';
return (
<div>
<i className="iconfont"></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;
}
JavaScriptについて質問しているときに、なぜJavaタグですか? – GhostCat
私のミスに申し訳ありません –