Rumah  >  Soal Jawab  >  teks badan

Tidak dapat menghantar nilai harta komponen ReactJS kepada komponen lain

<p>Bagaimana untuk mendapatkan nilai terkini objek dimensi yang dikemas kini dalam komponen Navbar.js dalam komponen Home.js? Saya cuba menghantar fungsi panggil balik sebagai prop daripada Home.js kepada Navbar.js (memandangkan Home.js ialah komponen induk Navbar.js), tetapi saya tidak boleh menyimpan nilai keadaan dimensi yang baru dikemas kini dalam Navbar.js. Jika saya melepasi keadaan dimensi sebagai pergantungan useEffect, ia menyebabkan gelung tak terhingga. tolong saya. </p> <pre class="brush:php;toolbar:false;">**Komponen Home.js** const Laman Utama = () => const [heightNav, setHeightNav] = useState(0); useEffect(() => { console.log(heightNav); }, [heightNav]); kembali ( <div> <Navbar setHeight={(h) => setHeightNav(() => h); }} /> </div> ); }; **Komponen Navbar.js** const Navbar = ({ setHeight }) => const refContainer = useRef(); const [dimensi, setDimensions] = useState({ width: 0, height: 0 }); useEffect(() => { jika (refContainer.current) { setDimensions(() => { kembali { lebar: refContainer.current.offsetWidth, ketinggian: refContainer.current.offsetHeight, }; }); setHeight(dimensi.height); } }, []); kembali ( <Container ref={refContainer}> </Bekas> ); };</pre>
P粉647504283P粉647504283453 hari yang lalu524

membalas semua(1)saya akan balas

  • P粉420958692

    P粉4209586922023-08-16 22:15:16

    Cuba bar navigasi ini:

    import React, { useEffect, useState, useRef } from 'react';
    
    const Navbar = ({ setHeight }) => {
      const refContainer = useRef();
      const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
    
      useEffect(() => {
        const updateDimensions = () => {
          if (refContainer.current) {
            setDimensions({
              width: refContainer.current.offsetWidth,
              height: refContainer.current.offsetHeight,
            });
          }
        };
    
        updateDimensions();
        window.addEventListener('resize', updateDimensions);
    
        return () => {
          window.removeEventListener('resize', updateDimensions);
        };
      }, []);
    
      useEffect(() => {
        setHeight(dimensions.height);
      }, [dimensions.height, setHeight]);
    
      return <div ref={refContainer}>Navbar Content</div>;
    };
    
    export default Navbar;

    balas
    0
  • Batalbalas