我有一个下一个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。