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