Javascript 返回不带引号的HTML字符串

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

现在是什么样子：

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

让你的元素=新元素（（）=>{
返回(
“测试”
);
}

我正在努力实现的目标：

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

让你的元素=新元素（（）=>{
返回(
试验
);
}

我不知道React是如何做到这一点的。

React使用它，然后将其送入transpiler（如jsx transform或Babel）将其转换为浏览器可以理解的标准javascript

如果您不想使用transpiler并能够将其直接传递到浏览器，则更接近于使用：

让你的元素=新元素（（）=>{
返回(`
试验
`);
}

这将允许您使用还可以包含双引号的多行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>
   `);
}

让className=“foo”；
让你的元素=新元素（（）=>{
返回(`
试验
试验
`);
}

React设法使用。您可以使用勾号而不是括号…（即，

return`Test`

）使其更简单。我知道blockquotes。我想在这个功能中使用JSX有点过火，所以我将坚持使用引号。。

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