如何使用react钩子只展开和折叠手风琴中的第一个项目

Question

以下是我尝试做的

import React, { Fragment, useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(null);
const [display, setDisplay] = useState("");
const handleChange = (index) => {
setActiveIndex(index);
setDisplay(display === "active" ? "" : "active");
};
const renderedItems = items.map((item, index) => {
return (
<Fragment key={item.title}>
<div className={`${display} title`} onClick={() => handleChange(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`${display} content`}>
<p>{item.content}</p>
</div>
</Fragment>
);
});
return (
<div className="ui styled accordion">
{renderedItems}
{activeIndex}
</div>
);
};
export default Accordion;

但单击单个项目时，它会展开或折叠所有其他项目。此外，我在任何给定的时间只想要一个展开的项目，所以如果用户单击另一个项目，上一个项目应该会自动关闭。

这是我的App.js

import React from "react";
import Accordion from "./components/Accordion";
const items = [
{
title: "What is React?",
content: "React is a front end javascript library",
},
{
title: "What is Angular?",
content: "Angular is a front end javascript framework",
},
{
title: "What is Vue?",
content: "Vue is a front end javascript library",
},
];
const App = () => {
return (
<div>
<Accordion items={items} />
</div>
);
};
export default App;

Answer 1

对于您的问题：

// Means if display is active so nothing else it's active, so everything is active
setDisplay(display === "active" ? "" : "active");

显示变量在每个手风琴主体之间共享。。。总是相同的

你真的需要display变量吗？

import React, { Fragment, useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(null);
const handleChange = index => {
setActiveIndex(activeIndex === index ? null : index);
};
const renderedItems = items.map((item, index) => {
return (
<Fragment key={item.title}>
<div className={`${display} title`} onClick={() => handleChange(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`${activeIndex === index ? 'active' : ''} content`}>
<p>{item.content}</p>
</div>
</Fragment>
);
});
return (
<div className="ui styled accordion">
{renderedItems}
{activeIndex}
</div>
);
};
export default Accordion;