控制嵌套手风琴段内的高度

Question

我已经创建了一个手风琴组件，当我试图使用嵌套级别时，我将在手风琴内滚动。我不想有一个卷轴在手风琴内的部分，而不是该页应该滚动在下面。

我怎么能做到这一点。

App.js

import Accordion from "./Accordion";

export default function App() {
  return (
    <div>
      <Accordion title="Whats lorem ipsum?">
        <Accordion title="Whats lorem ipsum?">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s.
        </Accordion>
        <Accordion title="Whats lorem ipsum?">
          <ul>
            <li>
              a) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              b) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              c) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              d) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
          </ul>
        </Accordion>
      </Accordion>
      <Accordion title="Whats lorem ipsum?">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s.
      </Accordion>
      <Accordion title="Whats lorem ipsum?">
        <ul>
          <li>
            a) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            b) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            c) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            d) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
        </ul>
      </Accordion>
    </div>
  );
}

我添加了工作的码箱

任何帮助都是非常感谢的。

Answer 1

根据您在代码框内的代码

Accordian/index.js

很少有变化能做得很好，好好看看。

import React, { useState, useRef } from "react";
import Chevron from "./Chevron";

import "./style.css";

function Accordion(props) {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");
  const [setRotate, setRotateState] = useState("accordion__icon");
  const [setMargin, setMarginState] = useState("0px");

  const content = useRef(null);

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : "500px" // set pixel according to your needs 
    );
    setRotateState(
      setActive === "active" ? "accordion__icon" : "accordion__icon rotate"
    );
    setMarginState(setActive === "active" ? "0px" : "1rem");
  }

  return (
    <div className="accordion__section">
      <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
        <p className="accordion__title">{props.title}</p>
        <Chevron className={`${setRotate}`} width={10} fill={"#777"} />
      </button>
      <div
        ref={content}
        style={{
          maxHeight: `${setHeight}`,
          marginBottom: `${setMargin}`,
          overflow: "hidden" // set overflow as hidden
        }}
        className="accordion__content"
      >
        <div className="accordion__text">{props.children}</div>
      </div>
    </div>
  );
}

export default Accordion;