Question

在我的测试组件中，我渲染了2个图标。在第一个我写的内容＆＃34; i＆＃34;元件。在第二个中，我定义一个变量，然后通过{}获取值。＆＃39;＆amp;＃xe64c＆＃39;是图标的代码。

结果：第一个正确显示图标。第二个没有显示图标。谁能告诉我为什么？

非常感谢。

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

Answer 1

您只是遗漏了let作业中的分号：

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

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

代码必须是完整值。最后的分号是代码的一部分。

react.js中括号express和string之间有什么区别

1 个答案: