Question

我是一位长期使用jQuery的用户，刚开始学习React。我真的很喜欢React如何使用JSX在Javascript中处理HTML标记，所以我想知道是否有办法在jQuery中做类似的事情？

例如，我在jQuery中的所有Ajax调用都返回如下内容：

.done(data){
     var content = "";
     content += "<div class='watermelon'>";
     content += "<div class='green-shell'>";
     content += data.inside;
     content += "</div></div>";
     $("#div-element").html(content);
}

是否有可能让它看起来像是：

.done(data){
     <div class='watermelon'>
         <div class='green-shell'>
             {data.inside}
         </div>
     </div>
}

Answer 1

您可以使用Underscores模板，如下所示：

var template = _.template('<div class=\"watermelon\">' + 
                            '<div class=\"green-shell\">' +
                              '<%=inside%>' +
                            '</div>' +
                          '</div>'
                         );
.done(data) {
  $("#div-element").html(template({inside: data.inside}));
}

有点草率仍然因为它不是JSX。如果它是你的选择，你开始真的喜欢React。我会尝试开始将JQuery重写为React，这样你就可以充分利用JSX / React，而不是找到一种在JQuery中编写JSX替代方法的方法。只是我的建议，因为我是一个很大的JQuery粉丝，直到我看到虚拟DOM的优势和React提供的。

Answer 2

此问题已在ES2015中得到解决。您可以使用backTick返回multiline string。但截至目前，浏览器支持对此不利，因此您需要使用babel或类似的东西进行转换。

.done(data){
   $("#div-element").html(
     `<div class='watermelon'>
         <div class='green-shell'>
            ${data.inside}
         </div>
     </div>`
   );
}

使用jQuery生成干净的HTML标记（如JSX）

2 个答案: