返回不带引号的HTML字符串

Question

我正在开发一个允许以动态方式重用HTML代码的项目（很像React）。为了创建模板，我需要返回带有HTML内容的字符串。为了更容易地使用HTML，我想一起摆脱引号，而不会出错。

现在看起来如何：

let your_elem = new Element(() => {
   return (
      "<h1>Test</h1>"
   );
}

我想要实现的目标：

let your_elem = new Element(() => {
   return (
      <h1>Test</h1>
   );
}

我不确定React是如何做到的。

Answer 1

React使用JSX然后将其转换为转换器（例如jsx-transform或Babel），将其转换为浏览器可以理解的标准JavaScript。

如果您不想使用转发器并且能够将其直接传递给浏览器，请稍微靠近backquote：

let your_elem = new Element(() => {
   return (`
      <h1>Test</h1>
   `);
}

这将允许您还可以包含双引号的多行javascript字符串文字：

let your_elem = new Element(() => {
   return (`
      <h1 class="foo">Test</h1>
      <div>Test</div>
   `);
}

它还允许您通过将javascript代码直接注入模板来使其更具动态性：

let className = "foo";
let your_elem = new Element(() => {
   return (`
      <h1 class="${className}">Test</h1>
      <div>Test</div>
   `);
}