如何在React.js中使用带callback参数的CDN URL回调？

Hey there, the issue here is that your initializeReactBingMaps method is scoped to your React component instance—not the global window object. The Bing Maps CDN script looks for the callback function in the global scope, so it can’t locate your component’s method when it tries to fire it. Let’s fix this step by step.

Why Your Callback Isn’t Firing #

React component methods are not exposed to the global window by default. When the CDN finishes loading, it tries to call initializeReactBingMaps() as a global function, but since it only exists on your component instance, the call fails silently.

Fix for React Class Components #

We’ll attach your callback to the global window object when the component mounts, then clean it up to avoid memory leaks or naming conflicts:

class BingMapComponent extends React.Component {
  constructor(props) {
    super(props);
    // Bind the method to the component instance so `this` works correctly inside it
    this.initializeReactBingMaps = this.initializeReactBingMaps.bind(this);
  }

  componentDidMount() {
    // Expose the callback to the global window object
    window.initializeReactBingMaps = this.initializeReactBingMaps;

    // Create and inject the Bing Maps script tag
    const script = document.createElement('script');
    script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=initializeReactBingMaps';
    script.async = true;
    document.body.appendChild(script);
  }

  componentWillUnmount() {
    // Clean up the global callback to avoid pollution
    delete window.initializeReactBingMaps;
    
    // Optional: Remove the script tag if you don't need it anymore
    const existingScript = document.querySelector('script[src="https://www.bing.com/api/maps/mapcontrol?callback=initializeReactBingMaps"]');
    if (existingScript) document.body.removeChild(existingScript);
  }

  initializeReactBingMaps() {
    // Your map initialization logic goes here
    console.log('Bing Maps script loaded successfully!');
    // Example: Initialize the map (replace with your API key)
    // const map = new Microsoft.Maps.Map('#mapContainer', { credentials: 'YOUR_BING_MAPS_KEY' });
  }

  render() {
    return <div id="mapContainer" style={{ width: '100%', height: '400px' }}></div>;
  }
}

Fix for React Function Components #

If you’re using hooks, use useEffect for side effects and useCallback to stabilize the callback reference:

import React, { useEffect, useCallback } from 'react';

const BingMapComponent = () => {
  // Use useCallback to keep the callback reference stable
  const initializeReactBingMaps = useCallback(() => {
    console.log('Bing Maps script loaded successfully!');
    // Map initialization logic here
    // const map = new Microsoft.Maps.Map('#mapContainer', { credentials: 'YOUR_BING_MAPS_KEY' });
  }, []);

  useEffect(() => {
    // Attach the callback to the global window object
    window.initializeReactBingMaps = initializeReactBingMaps;

    // Load the Bing Maps script
    const script = document.createElement('script');
    script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=initializeReactBingMaps';
    script.async = true;
    document.body.appendChild(script);

    // Cleanup when the component unmounts
    return () => {
      delete window.initializeReactBingMaps;
      const existingScript = document.querySelector('script[src="https://www.bing.com/api/maps/mapcontrol?callback=initializeReactBingMaps"]');
      if (existingScript) document.body.removeChild(existingScript);
    };
  }, [initializeReactBingMaps]);

  return <div id="mapContainer" style={{ width: '100%', height: '400px' }}></div>;
};

export default BingMapComponent;

Key Notes #

• API Key: Don’t forget to replace YOUR_BING_MAPS_KEY with your actual API key—without it, the map won’t render properly.
• Avoid Duplicate Scripts: If your component might mount multiple times, add a check before creating the script tag to prevent loading the CDN multiple times.
• Global Cleanup: Always delete the global callback in the cleanup phase to avoid polluting the window object and causing conflicts with other code.

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