我目前正在开发 React 版本 16.3.2 中的 Accordion 组件,该组件从另一个组件接收 props 并相应地显示 Accordion 。不幸的是我不能使用钩子(Hook)。
这工作得相当顺利,我现在想要实现的是一种方法,以便在同一页面上同时只能打开一个 Accordion 。因此,一旦您打开一个 Accordion (而另一个已经打开),它应该会自动关闭已经打开的 Accordion 。
我有一个 Id(描述当前部分的字符串,例如“联系人”、“信息”等),并且 Accordion 的状态保存在状态中(当您切换 Accordion 时设置为 true)。 我不太确定如何实现此机制,并且正在寻找有关如何以智能方式解决此问题的提示。有什么指点吗?
示例: https://codesandbox.io/s/reactjs-accordion-automatic-close-mechanism-6dys1 (我没有添加所有样式、动画,因为这更多的是关于功能)
最佳答案
您可以使用应用程序组件中的状态 Hook 来执行类似的操作
export default function App() {
const items = [
{ id: 1, title: 'First Accordion', content: 'Hello' },
{ id: 2, title: 'Click me', content: 'Hello 2' },
{ id: 3, title: 'Third Accordion Accordion', content: 'Hello 3' },
]
const [selectedItem, setSelectedItem] = useState(1)
const handleClick = id => {
setSelectedItem(id)
}
return (
<div className="App">
{items.map(x => {
return (
<Accordion
key={x.id}
id={x.id}
title={x.title}
open={x.id === selectedItem}
onClick={handleClick}
>
<p>{x.title}</p>
</Accordion>
)
})}
</div>
);
}
那么你的 Accordion 组件就更简单了
class Accordion extends React.Component {
accToggle() {
this.props.onClick(this.props.id);
}
sectionClasses() {
let classes = "accordion";
classes += this.props.open ? " sec-on" : "";
classes += "sec-underway";
return classes.trim();
}
render() {
return (
<section className={this.sectionClasses()} id={this.props.id}>
<div className="acc-title" onClick={this.accToggle.bind(this)}>
<h3 className="acc-text">{this.props.title}</h3>
<div className="acc-nav">
<span className="acc-toggle" />
</div>
</div>
<div className="acc-content">{this.props.children}</div>
</section>
);
}
}
Accordion.defaultProps = {
open: false
};
Accordion.propTypes = {
id: PropTypes.number.isRequired,
children: PropTypes.any,
onFocus: PropTypes.func,
progress: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
PropTypes.bool
]),
title: PropTypes.string,
open: PropTypes.bool
};
export default Accordion;
Accordion 调用应用程序组件上的函数,该函数更新状态并在 props 中传递显示逻辑
关于javascript - ReactJs Accordion 自动关闭机制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59770811/