React + Nextjs -外部脚本加载但不一起执行

Question

我有一个下一个js应用程序，我需要通过从父站点导入页眉和页脚来将其与现有站点集成。标记和支持库是通过JS文件传递的，页眉和页脚各有一个。下面是我的_apps.js、navigation.js和footer.js文件的外观：

_app.js：

render() {
    return (
      <Provider store={reduxStore}>
        <Head headerData={newStaticData} />
        <Navigation />
        <OtherComponents />
        <Footer />
      </Provider>
    );
  }

navigation.js：

class Navigation extends Component {
    shouldComponentUpdate() {
        return false;
    }

    componentDidMount() {
        const script = document.createElement('script');
        script.src = "https://mainsite.com/external/header.js";
        script.async = true
        document.body.appendChild(script);
    }

    render() {
        return (
            <div id="target_div_id"></div>
        )
    }
}

export default Navigation;

footer.js：

class Footer extends Component {
    shouldComponentUpdate() {
        return false;
    }

    componentDidMount() {
        const script = document.createElement('script');
        script.src = "https://mainsite.com/external/footer.js";
        script.async = true
        document.body.appendChild(script);
    }

    render() {
        return (
            <div id="footer_target_id"></div>
        )
    }
}

export default Footer;

当我运行这段代码时，只会显示主导航，而不会显示页脚。如果它注释掉了导航，那么页脚就会出现。我不知道为什么，但它看起来一次只加载一次。我试过使用script.defer=true，但也没有用。

有没有人能建议一下可能是什么原因造成的，解决方案是什么？

蒂娅。

Answer 1

即使在子组件中，您也可以使用react-helmet轻松完成此操作

import React from "react";
import {Helmet} from "react-helmet";
class Navigation extends Component {
render() {
    return (
        <div id="target_div_id">
        <Helmet>
            <script type="text/javascript" href="https://mainsite.com/external/header.js" />
        </Helmet></div>
    )
 }
}
export default Navigation;

尝试使用react挂钩而不是react组件生命周期

const Navigation = ()=> {
 return (
        <div id="target_div_id">
        <Helmet>
            <script type="text/javascript" href="https://mainsite.com/external/header.js" />
        </Helmet></div>
    )
}

export {Navigation} ;

// parent 
import {Navigation} from "../Navigation.js";

Answer 2

我建议你不要使用_app.js来完成这个任务。

尝试创建布局文件，如下所示：

// MainLayout.js
import NavBar from './Navigation.js'
import Footer from './Footer.js'

export default ({ children }) => (
  <>
    <Navigation />
    {children}
    <Footer />
  </>
)

让你的主文件像这样：

// index.js
import React from 'react'
import MainLayout from '../components/Layouts/MainLayout.js'
import Banner from '../components/Banner/Banner.js'

export default function Home() {
  return (
    <>
      <MainLayout>
        <Banner />
      </MainLayout>
    </>
  )
}