如何通过JavaScript UMD加载React组件？非npm生态项目技术咨询

Hey there! Let's walk through how to properly integrate that UMD-format component into your React project (without relying on npm). UMD builds are made to work across different environments, so we can get this sorted out without too much hassle.

First, make sure you load the UMD component after React and ReactDOM, since it almost certainly depends on them. Here's how your HTML should look:

<!-- Load React and ReactDOM first -->
<script src="path/to/react.production.min.js"></script>
<script src="path/to/react-dom.production.min.js"></script>

<!-- Then load your UMD component -->
<script src="path/to/your-component.umd.js"></script>

UMD builds typically expose a global variable (like YourComponentName — check the component's docs to confirm the exact name). This will be your entry point to use the component in React.

Once the script loads, you can reference the global variable directly in your React render logic. Here are two common approaches:

Option 1: Using React.createElement (no JSX needed) #

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(YourComponentName, { 
    prop1: "your-value",
    onSomeEvent: () => console.log("Event triggered!")
  })
);

Option 2: Using JSX (requires Babel) #

If you prefer JSX, add the Babel standalone script before your React code, then wrap your JSX in a <script type="text/babel"> tag:

<!-- Add Babel to transpile JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <YourComponentName 
      prop1="your-value"
      onSomeEvent={() => console.log("Event triggered!")}
    />
  );
</script>

If you're set on using RequireJS, the key is to properly map dependencies so RequireJS can resolve React/ReactDOM and your UMD component. Here's a working config example:

require.config({
  paths: {
    'react': 'path/to/react.production.min',
    'react-dom': 'path/to/react-dom.production.min',
    'your-component': 'path/to/your-component.umd'
  },
  shim: {
    // In case the UMD component doesn't explicitly declare React dependencies
    'your-component': {
      deps: ['react', 'react-dom'],
      exports: 'YourComponentName'
    }
  }
});

require(['react', 'react-dom', 'your-component'], function(React, ReactDOM, YourComponent) {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(YourComponent, { prop1: "your-value" }));
});

Common pitfalls here include incorrect file paths, missing dependencies in the shim config, or using the wrong global export name for the component.

If the component isn't loading, open your browser's dev tools console and type the expected global variable name (e.g., YourComponentName). If it returns undefined, double-check:

• The script tag's src path is correct (no 404 errors in the Network tab)
• The component is loaded after React/ReactDOM
• You're using the correct global variable name from the component's docs

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