如何在类React动态HTML复用项目中无引号返回HTML字符串

Got it, let's tackle this problem. The core issue here is that plain JavaScript doesn't natively recognize <h1>Test</h1> as valid syntax—your browser will throw a syntax error if you try to run that directly. To write HTML-like code without wrapping it in quotes, you'll need to use a preprocessor to convert that non-standard syntax into valid JS that returns your HTML string, just like React does with JSX.

Here's the most practical, scalable way to achieve what you want:

Use Babel to Transpile JSX-Like Syntax to HTML Strings #

We can repurpose React's JSX syntax (which is exactly the unquoted HTML-style code you want) and configure Babel to convert it into function calls that return raw HTML strings instead of React elements.

Step 1: Set Up Babel Dependencies #

First, install the necessary Babel tools:

npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-react-jsx

Step 2: Configure Babel to Use a Custom JSX Pragma #

Create a .babelrc file in your project root to tell Babel how to handle your JSX-like code:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "html", // This is the name of our custom function
      "pragmaFrag": "HtmlFragment" // For handling fragments if needed
    }]
  ]
}

Step 3: Create Your Custom html Function #

This function will take the JSX structure and convert it into an HTML string. Add this to your project:

// Define a helper function to convert JSX props to HTML attributes
function formatProps(props) {
  if (!props) return '';
  return Object.entries(props)
    .map(([key, value]) => ` ${key}="${value}"`)
    .join('');
}

// Our custom JSX pragma function
function html(tag, props, ...children) {
  const propsStr = formatProps(props);
  const childrenStr = children.join('');
  // For self-closing tags (like <img/>), handle edge cases here if needed
  return `<${tag}${propsStr}>${childrenStr}</${tag}>`;
}

// Optional: Handle fragments if you need to return multiple elements without a wrapper
function HtmlFragment(props) {
  return props.children.join('');
}

Step 4: Write Your Element Code Like You Wanted #

Now you can write your code exactly as you hoped—no quotes around your HTML:

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

// You can even do nested elements!
let another_elem = new Element(() => {
  return (
    <div>
      <h2>Hello</h2>
      <p>This works without quotes!</p>
    </div>
  );
});

Step 5: Transpile Your Code #

Run Babel to convert your JSX-like code into valid JavaScript:

npx babel src --out-dir dist

The transpiled code will replace the JSX with calls to your html function, which returns the HTML string your Element class expects.

Why This Works #

JSX is just syntactic sugar—Babel converts it into function calls under the hood. By customizing the pragma (the function Babel uses for JSX), we can make it output HTML strings instead of React components, which fits perfectly with your project's needs.

Alternative: Quick-and-Dirty Regex (Not Recommended for Production) #

If you don't want to set up Babel for a small project, you could use a regex to replace unquoted tags in your code during a build step. But this will break with nested elements, attributes, or complex HTML—so it's only suitable for very simple use cases. For example:

// A naive regex replace (not production-ready!)
function preprocessCode(code) {
  return code.replace(/(<[^>]+>)/g, '"$1"');
}

Stick with the Babel approach for anything beyond trivial templates.

内容的提问来源于stack exchange，提问作者user7878464