Javascript 过渡效果不适用于动态高度

我已经创建了一个折叠组件，但在打开和关闭折叠组件时，转换效果不起作用

index.js

const Collapse = ({ title, text, child, ...props }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleCollapse = () => setIsOpen((isOpen) => !isOpen);
  const closeCollapse = () => setIsOpen(false);

  const content = useRef(null);

  const isParentOpen = props.isParentOpen;

  useEffect(() => {
    if (!isParentOpen) closeCollapse();
  }, [isParentOpen]);

  const height = !isOpen ? "0px" : `auto`; // ${content.current?.scrollHeight}px

  return (
    <CollapseContainer>
      <CollapseButton isOpen={isOpen} onClick={toggleCollapse}>
        <CollapseTitleWrapper>{title}</CollapseTitleWrapper>
      </CollapseButton>
      <CollapseContent ref={content} max_height={height}>
        <CollapseText>
          {text}
          {child?.map((datumn, index) => (
            <Collapse
              {...datumn}
              key={`collapse-child-${index}`}
              isParentOpen={isOpen}
            />
          ))}
        </CollapseText>
      </CollapseContent>
    </CollapseContainer>
  );
};

const Collapse=（{title，text，child，…props}）=>{
常量[isOpen，setIsOpen]=useState（false）；
常量toggleCollapse=（）=>setIsOpen（（isOpen）=>！isOpen）；
const closeCollapse=（）=>setIsOpen（false）；
const content=useRef（null）；
常量isParentOpen=props.isParentOpen；
useffect（（）=>{
如果（！isParentOpen）closeCollapse（）；
}，[isParentOpen]）；
常量高度=！isOpen？“0px”：“自动”；//${content.current？.scrollHeight}px
返回(
{title}
{text}
{child？.map（（datumn，index）=>(
))}
);
};

我认为当嵌套的子对象也被打开和关闭时，应该进行高度计算

工作