当 child DOM 有新的 Table 渲染时反应手风琴更新高度

Question

在图像中，如您所见，我有一个 Foo 页面，其中有 10 个手风琴，其中一个手风琴中有一个表单组件，当我提交表单时，它会调用远程 API和 returns 一些 JSON 数据，我将其转换为 Table 内容并希望在表单下显示。

问题是我可以在点击提交按钮后再次切换手风琴后显示 Table，因为我已经在 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

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

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

因此，Table 动态显示，如果我的 Table 需要更大的 space，用户可以在手风琴内部滚动。

当 child DOM 有新的 Table 渲染时反应手风琴更新高度

React Accordion Update height when child DOM has new Table to render

javascript

dynamic

reactjs

react-native