我正在尝试在 React 中制作折叠/手风琴。 但问题是，它不会触发我想要切换的特定内容

Question

我正在尝试在 React 中制作折叠/手风琴。 但问题是，它不会触发我想要切换的特定内容，即当我点击标题时，所有段落标签都达到了最大高度。 我知道这段代码没有错误，但我也不知道如何触发特定的段落标签。

这是我的反应代码：

import React, {useState} from 'react'
import style from './stylecss.module.css'
import AnimateHeight from 'react-animate-height'
import cx from 'classname'
import globalStyles from '../Assets/global-styles/bootstrap.module.css'

function Collapse() {

  const item = [
    {
      heading : "HEADING 1",
      para : "DATA 1"
    },
    {
      heading : "HEADING 2",
      para : "DATA 2"
    }
  ]
  
  const [state, setState] = useState("0")
  
  function displayPara (){
    console.log(itemPlace)
    if(state==0)
      setState("auto")
    else
      setState(0)
  }

  const itemPlace = item.map(({heading, para}) => {
    return (
    <div>
      <h5 onClick={ e => displayPara()}>
        {heading}
      </h5>
      <AnimateHeight duration={ 500 } height={ `${state}` }>
        <p>{para}</p>
      </AnimateHeight>
    </div>
    )
  })
  return (
    <div className={style.AboutPage}>
      {itemPlace}
    </div>
  )
}

export default Collapse

这是 CSS 代码

.AboutPage {
    margin-top : 40px;
    padding : 30px 6% 10px 6%;
    background-color: rgb(250, 250, 250);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.paraDiv {
    color : red !important;
    width: 100%;
    height : 100%;
    background-color: chartreuse;
    transition: max-height 0.5s;
}

.paraDiv.is-active {
    height: 300px;
}

我不希望使用内置或预定义的折叠组件。

Answer 1

你可以在本地做。

 <details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>

快速提醒，细节/摘要是制作手风琴最简单的方法

Answer 2

首先祝你好运！

您的代码所说的是：当用户单击其中一项（特别是 h5 标签）时，将高度设置为自动。 你给每个项目这个高度，不区分它是否应该打开。

因此，您要做的是将您在“状态”属性中更改的高度仅应用于用户单击的项目。

我添加了几行代码来实现它。

1. 添加另一个 state 属性，称为activeItem ，它指示哪些是活动项（用户单击的项）。
2. 在 displayPara 中添加一个参数 function：我们要显示的活动索引。
3. 仅将我们在 function 中设置的高度应用于activeItem 。

在这里你可以看到它。

 import React, {useState} from 'react' import style from './stylecss.module.css' import AnimateHeight from 'react-animate-height' import cx from 'classname' import globalStyles from '../Assets/globalstyles/bootstrap.module.css' function Collapse() { const item = [ { heading: "HEADING 1", para: "DATA 1" }, { heading: "HEADING 2", para: "DATA 2" } ] const [state, setState] = useState("0") const [activeItem, setActiveItem] = useState(null) function displayPara (index){ console.log(itemPlace) setActiveItem(index) if(state==0) setState("auto") else setState(0) } const itemPlace = item.map(({heading, para}, index) => { return ( <div> <h5 onClick={ e => displayPara(index)}> {heading} </h5> <AnimateHeight duration={ 500 } height={ `${activeItem === index? state: 0}` }> <p>{para}</p> </AnimateHeight> </div> ) }) return ( <div className={style.AboutPage}> {itemPlace} </div> ) } export default Collapse

正如上面的评论之一所说，您也可以在不持有任何 state 的情况下，使用详细信息和摘要 HTML 标签来实现它。 您还可以使用 CSS 将其设置为与您的设计完全相同。

 <details> <summary>Heading 1</summary> <p>Heading 1 Content</p> </details>