高度大小变化不会导致状态更新React Hooks

Question

我正在尝试使我的轮播高度在更改时动态调整大小。但是我似乎无法单纯从孩子的身高变化中引发状态变化。

听孩子们很好，实际上我不确定为什么它不起作用。

将错误消息附加到轮播中的孩子时，会发生问题。它不会更新。

目前我所知道要做的最好的事情是间隔... 有更好的方法吗？

import React, {useState, useEffect, useRef} from 'react';
import './Carousel.scss';

// Wrapped children components must be placed inside of <div> elements
const Carousel = ({slideTo, children}) => {

  const [carouselStyle, setCarouselStyle] = useState({});
  const activeRef = useRef(null);
  const index = slideTo - 1

  const newChildren = [];
  children.map((d,i) => {
    let addClass = (d.props.className !== undefined) ? d.props.className: ""
    const newProps = { 
      key: i 
    };

    if(i === index){
      addClass += " active"
      newProps.ref = activeRef;
    }

    newProps.className = addClass.trim();

    const newChild = React.cloneElement(d, newProps);

    newChildren.push(newChild);
    return false
  });

  const carouselContainerStyle = {
    left: (((slideTo * 100) - 100) * -1) + "%",
    width: (newChildren.length * 100)+ "%"
  }



  useEffect(() => {
    const interval = setInterval(function(){
      console.log("int");

      if(activeRef != null){
        if(carouselStyle.height === undefined || carouselStyle.height !== activeRef.current.clientHeight){
          setCarouselStyle({
            height: activeRef.current.clientHeight,
          });
        }
      }

    },50)

    return () => {
      clearInterval(interval)
    }
  },[]);

  useEffect(() => {
    console.log("children update");

    if(activeRef.current !== null){
      setCarouselStyle({
        height: activeRef.current.clientHeight,
      });
    }
  },[slideTo,children]);


  return (
    <div className="carousel" style={carouselStyle}>
      <div style={carouselContainerStyle} className="carousel-container">
        {newChildren}
      </div>
    </div>
  );
};

export default Carousel;

实施

<Carousel slideTo={slide}>
 <div><SignIn/></div>
 <div><SignUp/></div>
</Carousel>