reactjs 我尝试在React中制作折叠/ accordion ,但问题是，它没有触发我想要切换的特定内容

bgtovc5b 于 2022-11-22 发布在 React

关注(0)|答案(2)|浏览(161)

我尝试在React中做一个折叠/折叠。但问题是，它没有触发我想要切换的特定内容，即当我单击标题时，所有段落标记都达到了最大高度。我知道这段代码没有错误，但我也不知道如何触发特定段落标记。
下面是我的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;
}

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

reactjs

来源：https://stackoverflow.com/questions/62600213/im-trying-to-make-a-collapse-accordion-in-react-but-the-problem-is-it-is-not

2条答案

按热度按时间

hpxqektj1#

首先祝你好运！
你的代码说的是：当用户单击其中一个项目（特别是h5标签）时，将高度设置为auto。您可以将此高度赋予每个项目，而不区分它是否应该打开。
因此，您要做的是将在'state'属性中更改的高度仅应用于用户单击的项。
我添加了几行代码来实现它。
1.添加另一个名为activeItem的状态属性，该属性指示哪些是活动项（用户单击的项）。
1.向displayPara函数添加一个参数：要显示的活动索引。
1.仅将我们在函数中设置的高度应用于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>

赞(0）回复(0）举报 2022-11-22

z31licg02#

您可以在本机上执行此操作。

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

Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion

赞(0）回复(0）举报 2022-11-22

我来回答

reactjs 我尝试在React中制作折叠/ accordion ,但问题是，它没有触发我想要切换的特定内容

2条答案

相关问题

热门标签

最新问答