返回不带引号的 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>
   `);
}