Der Eigenschaftswert der ReactJS-Komponente kann nicht an eine andere Komponente übergeben werden
P粉647504283
2023-08-16 00:30:36
<p>Wie erhalte ich den neuesten aktualisierten Wert des Dimensionsobjekts in der Navbar.js-Komponente in der Home.js-Komponente? Ich habe versucht, eine Rückruffunktion als Requisiten von Home.js an Navbar.js zu übergeben (da Home.js die übergeordnete Komponente von Navbar.js ist), aber ich kann den neu aktualisierten Dimensionsstatuswert nicht in Navbar.js speichern. Wenn ich den Dimensionsstatus als Abhängigkeit von useEffect übergebe, führt dies zu einer Endlosschleife. Bitte hilf mir. </p>
<pre class="brush:php;toolbar:false;">**Home.js-Komponente**
const Home = () =>
const [heightNav, setHeightNav] = useState(0);
useEffect(() => {
console.log(heightNav);
}, [heightNav]);
zurückkehren (
<div>
<Navigationsleiste
setHeight={(h) =>
setHeightNav(() => h);
}}
/>
</div>
);
};
**Navbar.js-Komponente**
const Navbar = ({ setHeight }) =>
const refContainer = useRef();
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
useEffect(() => {
if (refContainer.current) {
setDimensions(() => {
zurückkehren {
Breite: refContainer.current.offsetWidth,
Höhe: refContainer.current.offsetHeight,
};
});
setHeight(dimensions.height);
}
}, []);
zurückkehren (
<Container ref={refContainer}>
</Container>
);
};</pre>
试一下这个导航栏: