Question

我有一个下一个js应用程序，我需要通过从父站点导入页眉和页脚将其与现有站点集成。它的标记以及支持的库通过一个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，但也没有帮助。

任何人都可以建议造成这种情况的原因和解决方案吗？

TIA。

Answer 1

我建议您不要为此使用_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>
    </>
  )
}

Answer 2

即使在子组件中，您也可以使用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";

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

2 个答案: