我正在尝试在 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

首先祝你好运！

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

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

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

1. 添加另一个 state 属性，称为activeItem指示哪些是活动项（用户单击的项）。

2. 在 displayPara 函数中添加一个参数：我们要显示的活动索引。

3. 仅将我们在函数中设置的高度应用于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

正如上面的评论之一所说，您也可以在不保持任何状态的情况下使用 details 和 summary HTML 标签在本地实现它。您还可以使用 CSS 将其样式设置为与您的设计完全相同。

<details>

  <summary>Heading 1</summary>

  <p>Heading 1 Content</p>

</details>

Answer 2

你可以在本地做。

<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>