在我的测试组件中,我渲染了2个图标。在第一个中,我将内容写在“ i”元素中。在第二个中,我定义一个变量,然后通过{}获取值。 “&#xe64c”是图标的代码。
结果:第一个正确显示图标。第二个不显示图标。谁能告诉我为什么?
非常感谢。
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;
}
最佳答案
您只是在let
作业中缺少分号:
class Test extends Component{
render(){
let iconCode = '';
return (
<div>
<i className="iconfont"></i>
<i className="iconfont">{iconCode}</i>
</div>
);
}
}
该代码必须是完整值

。最后的分号是代码的一部分。关于css - react.js中括号和字符串之间的区别是什么,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39445992/