我正在尝试在 React 中创建 collapse/accordion。但问题是，它没有触发我想要切换的特定内容

Question

我正在尝试在 React 中创建一个 collapse/accordion。但问题是，它没有触发我想要切换的特定内容，即当我点击标题时，所有段落标签都达到了最大高度。我知道这段代码没有错误，但我也不知道如何触发特定的段落标记。

这是我的 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;
}

我不想使用 built-in 或 pre-defined 折叠组件。

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>

快速提醒 Details/Summary 是制作手风琴最简单的方法

Answer 2

首先祝你好运！

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

所以您要做的是将您在 'state' 属性中更改的高度仅应用于用户单击的项目。

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

添加另一个状态属性，称为 activeItem，指示哪些是活动项目（用户单击的项目）。
给displayPara函数添加一个参数：我们要显示的活动索引
仅将我们在函数中设置的高度应用到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

正如上面的评论之一所说，您也可以在不保持任何状态的情况下使用详细信息和摘要 HTML 标签在本机实现它。您还可以使用 CSS.

将其样式设置为与您的设计完全一样

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

我正在尝试在 React 中创建 collapse/accordion。但问题是，它没有触发我想要切换的特定内容

I'm trying to make a collapse/accordion in React. But the problem is, it is not triggering the specific content that i want to toggle

javascript

css

reactjs

accordion

collapse