当子 DOM 有新表要渲染时反应手风琴更新高度

Question

如图所示，我有一个 Foo 页面，其中有 10 个 Accordions，其中一个 Accordions 中有一个 Form 组件，当我提交 Form 时，它调用远程 API 并返回一些 JSON 数据，我将其转换到目录并希望在表单下显示它。

问题是我可以在单击提交按钮后再次切换手风琴后显示表格，因为我在 onClick 中设置了最大高度。

const [activeState, setActiveState] = useState("");
const [activeHeight, setActiveHeight] = useState("0px");

const toogleActive = () => {
    setActiveState(activeState === "" ? "active" : "");
    setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight}px`)
    }


return (
    <div className={styles.accordion_section}>
      <button className={styles.accordion} onClick={toogleActive}>
        <p className={styles.accordion_title}>{title}</p>
      </button>

      <div ref={contentRef}
        style={{ maxHeight: `${activeHeight}` }}
        className={styles.accordion_content}>
        <div>
          {content}
          </div>
      </div>
    </div>
  )

我还使用上下文在 Accordion 和 Form 组件之间共享 useState 挂钩以更新高度。

  <UpdateHeightContext.Provider value={{updateHeight, setUpdateHeight}}>
      <Accordion title="Find your Data" content={< FormWithTwoInput firstLabel="FirstName" secondLabel="LastName" buttonColor="blue" buttonText="Check Deatils"/>} />
      </UpdateHeightContext.Provider>

当我收到来自 API 的响应时，有什么方法可以动态更新 Accordions 高度？ 除了再次切换它。 在这里问了一个类似的问题React Accordion, set dynamic height when DOM's children change不幸的是没有人回答。

Answer 1

尽管围绕我发现的工作不是一个强大的工作，但它对我来说完全没问题。 如果有人偶然发现同样的问题，可能会发现这很有用。

import React, { useState, useRef } from 'react'

const Accordion = ({ title, content }) => {

const [activeState, setActiveState] = useState("");
const [activeHeight, setActiveHeight] = useState("0px");
const contentRef = useRef("form")

const toogleActive = () => {
    setActiveState(activeState === "" ? "active" : "");
    setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight + 100}px`)
    }


return (
    <div className={styles.accordion_section}>
      <button className={styles.accordion} onClick={toogleActive}>
        <p className={styles.accordion_title}>{title}</p>
      </button>

      <div ref={contentRef}
        style={{ maxHeight: `${activeHeight}` }}
        className={styles.accordion_content}>
        <div>
          {content}
          </div>
      </div>
    </div>
  )
}

Accordion.propTypes = {
    title: PropTypes.string,
    content: PropTypes.object,
}

export default Accordion

我硬编码了一些额外的空间，以便在接受动态响应时显示表格内容。 在 CSS 模块文件中，我将溢出保持为自动，之前它是隐藏的。

  .accordion_content {
    background-color: white;
    overflow: auto;
    max-height: max-content;
  }

结果，表格动态显示，如果我的表格需要更大的空间，用户可以在手风琴内滚动。