React组件异常渲染至页面底部问题排查求助

问题描述 #

我有两个文件，其中一个组件通过API调用返回包含第三方<script>标签的div，但在页面渲染时，该组件的实际内容意外显示在所有组件下方。从DOM结构上看，MediaAlpha的占位div位于Footer上方，但第三方脚本渲染的内容却出现在Footer之后，请问这是什么原因？

相关代码 #

MediaAlpha组件代码 #

import React, { Component } from "react";

class MediaAlpha extends Component {
    componentDidMount() {
        const renderScript = document.createElement("script");

        const zip = localStorage.getItem("zipCode");

        /*
            TODO:
            1. add TCPA to text
            2. add url
            3. add placement ID
        */
        renderScript.innerHTML =
            "window.MediaAlphaExchange = " +
            "{ data: { zip: sessionStorage.getItem('zipCode')," +
            "text: 'By hitting Get Your Free Quote, below, I provide my express written consent to receive telemarketing calls and text messages (including through the use of an Automated Telephone Dialing System or prerecorded or artificial voices), emails, and postal mail transmitting insurance quotes, or seeking related additional information from me,from this Web site, our marketing partners and re-marketing network, and up to eight insurance companies or their affiliates or representatives at the phone number (including wireless number), email address,and postal address provided by me. I also expressly consent to electronic video monitoring and recordation of my activities on this Site. I also understand that my agreement to be contacted is not a condition of purchasing any property, goods, or services and that I may call (888) 299-0012 to speak with someone about obtaining an insurance quote. I acknowledge that I may revoke my consent by emailing STOP to  optout@quotehound.com. (2) I agree to this websites Privacy Policy and  Terms & Conditions'," + //CHANGE 1 HERE  remove {INSERT} and keep the quotation marks
            "url: 'covermyexpense.com'" + // CHANGE 2 HERE  {INSERT} and keep the quotation marks
            "}," +
            "placement_id: 'YiPFAJc_r0i9fsZr0uP7vvicsinK3Q'," + // CHANGE 3 HERE  {INSERT} and keep the quotation marks
            "sub_1: 'test sub id', type: 'ad_unit', version: '17' };  MediaAlphaExchange__load('mediaalpha_placeholder');";

        document.body.appendChild(renderScript);

        const script = document.createElement("script");

        script.src = "//insurance.mediaalpha.com/js/serve.js";
        script.async = true;
        document.body.appendChild(script);
    }

    render() {
        return <div id="mediaalpha_placeholder" className="bg-[#F3F5FF]" />;
    }
}

export default MediaAlpha;

页面渲染位置代码 #

import React, { useEffect } from "react";
import $ from "jquery";
import CTACall from "../Components/CTACall";
import MediaAlpha from "../api/MediaAlpha";
import ConnectMe from "../api/ConnectMe";
import ConfettiGenerator from "confetti-js";
import Footer from "../Components/Footer";

function ThankYou(props) {
    let tele = sessionStorage.getItem("phone");

    return (
        <div className="bg-[#F3F5FF] ">
            <div className="bg-[#F3F5FF] z-1">
                <div className=" mx-auto flex items-center justify-center py-5 px-4 sm:px-6 lg:px-4" id="content">
                    <div className=" w-full space-y-8">
                        <div>
                            <h2 className="mt-4 text-center text-4xl font-extrabold text-gray-900">
                                Congratulations! You have been matched with these partners...
                            </h2>
                        </div>
                        <MediaAlpha />

                        <ConnectMe moduleId="1657" phoneNumber={tele} />
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}
export default ThankYou;

原因分析 #

核心问题出在第三方脚本serve.js的渲染逻辑上：

1. 调用MediaAlphaExchange__load('mediaalpha_placeholder')时，该脚本未正确将生成内容插入到指定的mediaalpha_placeholder容器内部，而是直接将DOM元素追加到document.body末尾，导致内容出现在Footer之后。
2. 脚本异步加载的特性可能存在执行时机偏差，但你的占位div在componentDidMount时已存在于DOM中，因此更可能是第三方脚本自身实现逻辑问题。
3. 也有可能是第三方脚本生成的内容带有position: fixed/absolute这类脱离文档流的CSS定位，导致视觉层级上跑到Footer下方。

解决方案 #

1. 调整脚本注入位置：不要将脚本追加到document.body，而是插入到目标占位容器内部，确保脚本在容器上下文执行：

componentDidMount() {
    const placeholder = document.getElementById('mediaalpha_placeholder');
    if (!placeholder) return;

    const renderScript = document.createElement("script");
    // 保留原renderScript的innerHTML内容不变
    renderScript.innerHTML = "..."; 

    placeholder.appendChild(renderScript);

    const script = document.createElement("script");
    script.src = "//insurance.mediaalpha.com/js/serve.js";
    script.async = true;
    placeholder.appendChild(script);
}

2. 验证第三方脚本逻辑：检查MediaAlphaExchange__load方法的官方文档或源码，确认它是否支持正确挂载到指定容器，是否需要额外参数来指定挂载目标。
3. 检查CSS定位：通过浏览器开发者工具查看第三方脚本生成的元素的CSS样式，若存在脱离文档流的定位属性，可通过自定义CSS修正其位置。

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