在我的测试组件中,我渲染了2个图标。在第一个中,我将内容写在“ i”元素中。在第二个中,我定义一个变量,然后通过{}获取值。 “&#xe64c”是图标的代码。

结果:第一个正确显示图标。第二个不显示图标。谁能告诉我为什么?

非常感谢。

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;
}

最佳答案

您只是在let作业中缺少分号:

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

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


该代码必须是完整值&#xe64c;。最后的分号是代码的一部分。

关于css - react.js中括号和字符串之间的区别是什么,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39445992/

10-12 12:57
查看更多