如何将Reactstrap折叠只打开一个项目？

Question

我正在使用reactstrap折叠手风琴常见问题解答。但是，我一次只想打开一个。我试过改变崩溃的状态，但没有任何工作。我可以打开所有物品。我也尝试用不受控制的崩溃取代它，所以我不必管理状态。有什么想法吗？

这是我的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { Col, Collapse } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg- 
icons';

class ListGroupCollapse extends React.Component {
static propTypes = {
    item: PropTypes.object,
};
state = {
    collapse: false,
    active: false,
};

toggle = () =>
    this.setState({
        collapse: !this.state.collapse,
        active: !this.state.active,
    });

render() {
    const item = this.props.item;
    return (
        <Col key={item.title}>
            <div
                className={this.state.active ? 'title active' : 'title'}
                onClick={this.toggle}
            >
                {item.title}
                <FontAwesomeIcon
                    icon={
                        this.state.active ? faChevronUp : faChevronDown
                    }
                />
            </div>
            <Collapse isOpen={this.state.collapse}>
                <div className="content">
                    <span
                        dangerouslySetInnerHTML={{
                            __html: this.props.item.content,
                        }}
                    />
                </div>
            </Collapse>
        </Col>
    );
}
}

export default ListGroupCollapse;

Answer 1

尝试在标记项中添加isOpen = {true}属性，希望这可以满足您的需求。