React组件挂载TripAdvisor外部DOM转换脚本的问题求解

Hey Darren, I see you’ve been stuck trying to keep your TripAdvisor content from vanishing after React re-renders—even after loading the script in componentDidMount and setting shouldComponentUpdate to false. Let’s break down some reliable solutions to solve this for good:

Solution 1: Precise Script Loading with Class Component Lifecycle Hooks #

If you’re using a class component, you can refine how you load the script to avoid duplicates and handle edge cases where you might need to refresh it. Here’s how:

class TripAdvisorReviews extends React.Component {
  componentDidMount() {
    this.injectTripAdvisorScript();
  }

  componentDidUpdate(prevProps) {
    // Only reload the script if a critical prop changes (adjust based on your needs)
    if (this.props.locationId !== prevProps.locationId) {
      this.injectTripAdvisorScript();
    }
  }

  injectTripAdvisorScript() {
    // Skip if the script already exists to avoid duplicate injections
    if (document.getElementById('tripadvisor-left-script')) return;

    const tripadvisorLeft = document.createElement("script");
    tripadvisorLeft.id = 'tripadvisor-left-script';
    tripadvisorLeft.src = "https://your-tripadvisor-script-url.com";
    tripadvisorLeft.async = true;
    
    // Add an onload callback to ensure the script initializes correctly
    tripadvisorLeft.onload = () => {
      console.log("TripAdvisor script loaded successfully");
      // If TripAdvisor provides an init method, you can call it here to force render
    };

    document.body.appendChild(tripadvisorLeft);
  }

  // Keep shouldComponentUpdate but make it conditional instead of hardcoding false
  shouldComponentUpdate(nextProps) {
    // Only allow re-renders if critical props change (prevents unnecessary updates)
    return this.props.locationId !== nextProps.locationId;
  }

  render() {
    // Use a fixed ID for the container so the script always knows where to render
    return <div id="tripadvisor-review-container"></div>;
  }
}

Solution 2: Use React.memo + useEffect for Functional Components #

If you’re working with functional components, React.memo is a cleaner alternative to shouldComponentUpdate, and useEffect handles script loading neatly:

import React, { useEffect } from 'react';

// React.memo prevents unnecessary re-renders unless props change
const TripAdvisorReviews = React.memo(({ locationId }) => {
  useEffect(() => {
    const loadScript = () => {
      const existingScript = document.getElementById('tripadvisor-script');
      if (existingScript) {
        // If the script exists but we need to refresh, remove it first
        document.body.removeChild(existingScript);
      }

      const script = document.createElement('script');
      script.id = 'tripadvisor-script';
      script.src = "https://your-tripadvisor-script-url.com";
      script.async = true;
      
      script.onload = () => {
        console.log("TripAdvisor script ready");
      };

      document.body.appendChild(script);
    };

    loadScript();

    // Clean up the script when the component unmounts
    return () => {
      const script = document.getElementById('tripadvisor-script');
      if (script) document.body.removeChild(script);
    };
  }, [locationId]); // Re-run effect only when locationId changes

  return <div id="tripadvisor-review-container"></div>;
});

Key Tips to Avoid Common Pitfalls #

• Keep your container element stable: Use a fixed id for the TripAdvisor container (don’t generate it dynamically in render). This ensures the script always has a consistent DOM node to target.
• Prevent duplicate script injections: Always check if the script already exists in the DOM before creating a new one—this avoids conflicts and performance issues.
• Watch for parent component re-renders: If your TripAdvisor component is wrapped in a parent that forces re-renders, shouldComponentUpdate or React.memo will still block the child from updating, but make sure the parent isn’t unmounting and remounting the child entirely.

If you’re still seeing content disappear, double-check if TripAdvisor’s script has any built-in logic that re-renders based on page events—you might need to trigger an initialization method manually in the onload callback of the script.

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