ReactJS 구성요소의 속성값을 다른 구성요소에 전달할 수 없습니다.

Question

Home.js 구성 요소의 Navbar.js 구성 요소에 있는 차원 개체의 최신 업데이트 값을 어떻게 가져오나요? Home.js에서 Navbar.js로 콜백 함수를 props로 전달하려고 시도했지만(Home.js는 Navbar.js의 상위 구성 요소이므로) 새로 업데이트된 차원 상태 값을 Navbar.js에 저장할 수 없습니다. useEffect의 종속성으로 차원 상태를 전달하면 무한 루프가 발생합니다. 도와주세요.

**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}>
    </컨테이너>
  );
};

Answer 1

다음 탐색 모음을 사용해 보세요.

으아악