如何在Tampermonkey脚本中嵌入React组件？解决JSX语法报错

你遇到的Unexpected token '<'错误，本质是Tampermonkey默认运行原生JavaScript，而JSX并非浏览器原生支持的语法，必须转译为普通JS才能执行。下面给三种可行的实现方案：

方案一：用React.createElement替代JSX（无需编译，适合简单组件） #

直接使用React原生API创建元素，完全避开JSX语法，不会出现语法错误：

// ==UserScript==
// @name         React Component (No JSX)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  无JSX的React组件示例
// @match        *://*/*
// @require      https://unpkg.com/react@18/umd/react.development.js
// @require      https://unpkg.com/react-dom@18/umd/react-dom.development.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const { React, ReactDOM } = window;

    // 用React.createElement定义组件
    const HelloComponent = () => React.createElement('div', null, 'Hello');

    // 创建挂载容器并添加到页面
    const container = document.createElement('div');
    container.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;background:#fff;padding:10px;';
    document.body.appendChild(container);

    // 渲染组件
    ReactDOM.render(React.createElement(HelloComponent), container);
})();

方案二：引入Babel实时编译JSX（支持复杂JSX组件） #

如果想直接写JSX，可以引入Babel独立版本，在脚本里实时编译JSX代码：

// ==UserScript==
// @name         React Component (With JSX)
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  带JSX的React组件示例（Babel实时编译）
// @match        *://*/*
// @require      https://unpkg.com/react@18/umd/react.development.js
// @require      https://unpkg.com/react-dom@18/umd/react-dom.development.js
// @require      https://unpkg.com/@babel/standalone/babel.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const { React, ReactDOM, Babel } = window;

    // 创建挂载容器
    const container = document.createElement('div');
    container.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;background:#fff;padding:10px;';
    document.body.appendChild(container);

    // 编写带JSX的组件代码
    const jsxCode = `
        const HelloComponent = () => {
            return <div>Hello</div>;
        };
        ReactDOM.render(<HelloComponent />, container);
    `;

    // 用Babel编译JSX并执行
    const compiledCode = Babel.transform(jsxCode, { presets: ['react'] }).code;
    eval(compiledCode);
})();

方案三：提前编译JSX为原生JS（性能最优，推荐） #

如果组件逻辑复杂，推荐提前把JSX转译为原生JS，再放到Tampermonkey脚本里：

1. 用Babel官网REPL工具，将你的JSX代码粘贴进去，自动得到编译后的原生JS。
2. 把编译后的代码直接替换到方案一的组件定义部分即可。

比如，JSX代码：

const HelloComponent = () => <div>Hello</div>;

编译后会变成：

const HelloComponent = () => React.createElement("div", null, "Hello");

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