Return HTML 不带引号的字符串

Question

我正在开发一个允许以动态方式重用 HTML 代码的项目（很像 React）。为了创建模板，我需要 return 个内容为 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>
   `);
}

Return HTML string without quotes