React JS无法解析span标记

时间:2016-10-15 09:54:13

标签: javascript reactjs

我正在使用reactjs在一个项目中工作。通过反应代码成功运行但无法解析某些标记。我的代码是

var Item = React.createClass({
    render: function () {
        var proDiscount;
        if(this.props.discount!=0){
            proDiscount = '<span>'+this.props.discount+'</span>';
        }else{
            proDiscount = '';
        }
        return (
            <div className="item">
               <div className="tag">{this.props.price} {proDiscount}</div>
            </div>
        );
    }
}); 

当呈现<span>标记无法解析时。输出保持span标签不变,输出的其余部分很好。我的问题在哪里谢谢。

1 个答案:

答案 0 :(得分:2)

它呈现标记,因为您正在返回一个字符串。这应该是正确的代码。

var Item = React.createClass({
  render: function() {
    return (
      <div className="item">
        <div className="tag">{this.props.price} {this.props.discount && <span>{this.props.discount}</span>}</div>
      </div>
    );
  }
});