如何让reactstrap Collapse首次加载时默认激活第一个下拉面板

要实现首次加载时默认展开第一个下拉面板（Article 1），同时保持点击切换时自动收起之前面板的逻辑，只需修改state的初始值即可：

修改步骤 #

• 将useState的初始状态从空对象{}改为{ article: "1" }，组件挂载时article的值就会是"1"，对应面板的Collapse会自动展开。

修改后的完整代码 #

import * as React from "react";
import { Button, Card, CardBody, Collapse } from "reactstrap";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  // 初始设置article为"1"，默认展开第一个面板
  const [state, setState] = React.useState({ article: "1" });
  const { article } = state;

  const handleArticleOpen = (article) => {
    setState((prevState) => ({
      ...prevState,
      article
    }));
  };

  return (
    <div className="app">
      <Card className="card">
        <CardBody className="card-body">
          <div className="section section-articles">
            <div className="articles-buttons">
              <Button
                className="article2-button"
                color="primary"
                onClick={() => handleArticleOpen("2")}
              >
                <h3>Article 2</h3>
              </Button>
              <Button
                className="article1-button"
                color="primary"
                onClick={() => handleArticleOpen("1")}
              >
                <h3>Article 1</h3>
              </Button>
            </div>

            <Collapse isOpen={article === "2"}>
              <Card className="card">
                <CardBody className="card-body">
                  <div>Article 2</div>
                </CardBody>
              </Card>
            </Collapse>
            <Collapse isOpen={article === "1"}>
              <Card className="card">
                <CardBody className="card-body">
                  <div>Article 1</div>
                </CardBody>
              </Card>
            </Collapse>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

逻辑说明 #

• 初始状态设置article: "1"，使得Collapse isOpen={article === "1"}在组件加载时为true，自动展开第一个面板。
• 点击其他按钮时，handleArticleOpen会更新article的值，此时只有新选中的面板对应的isOpen为true，之前的面板会自动收起，完全符合需求。

内容的提问来源于stack exchange，提问作者Teik Cheah