ReactJS 구성요소의 속성값을 다른 구성요소에 전달할 수 없습니다.
<p>Home.js 구성 요소의 Navbar.js 구성 요소에 있는 차원 개체의 최신 업데이트 값을 어떻게 가져오나요? Home.js에서 Navbar.js로 콜백 함수를 props로 전달하려고 시도했지만(Home.js는 Navbar.js의 상위 구성 요소이므로) 새로 업데이트된 차원 상태 값을 Navbar.js에 저장할 수 없습니다. useEffect의 종속성으로 차원 상태를 전달하면 무한 루프가 발생합니다. 도와주세요. </p>
<pre class="brush:php;toolbar:false;">**Home.js 구성요소**
const 홈 = () =>
const [heightNav, setHeightNav] = useState(0);
useEffect(() => {
console.log(heightNav);
}, [높이Nav]);
반품 (
<div>
<나브바
setHeight={(h) =>
setHeightNav(() =>h);
}}
/>
</div>
);
};
**Navbar.js 구성요소**
const Navbar = ({ setHeight }) =>
const refContainer = useRef();
const [dimensions, setDimensions] = useState({ 너비: 0, 높이: 0 });
useEffect(() => {
if(refContainer.current) {
setDimensions(() => {
반품 {
너비: refContainer.current.offsetWidth,
높이: refContainer.current.offsetHeight,
};
});
setHeight(dimensions.height);
}
}, []);
반품 (
<컨테이너 참조={refContainer}>
</컨테이너>
);
};</pre>