मेरे पास अगला जेएस एप्लिकेशन है और मुझे मूल साइट से शीर्षलेख और पाद लेख आयात करके इसे मौजूदा साइट के साथ एकीकृत करने की आवश्यकता है। यह एक जेएस फ़ाइल के माध्यम से सहायक libs के साथ मार्कअप वितरित किया जा रहा है, क्रमशः प्रत्येक शीर्षलेख और पाद लेख के लिए एक। मेरी _apps.js, नेविगेशन.जेएस और footer.js फ़ाइल इस तरह दिखती है:

_app.js:

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

नेविगेशन.जेएस:

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;

फूटर.जेएस:

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 का उपयोग करने की कोशिश की है, लेकिन कोई मदद नहीं की है।

क्या कोई सलाह दे सकता है कि इसका क्या कारण हो सकता है और इसका क्या समाधान है?

टीआईए.

0
Blueboye 14 नवम्बर 2019, 01:48

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>
    </>
  )
}
0
Hasan Sefa Ozalp 14 नवम्बर 2019, 08:20