css - react.js 中的括号表达式和字符串有什么区别

Question

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

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

非常感谢。

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 = '';

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

代码必须是完整值。末尾的分号是代码的一部分。