javascript - 返回不带引号的 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 代码直接注入(inject)模板来使其更具动态性:

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