ReactJs Collapse 打开后关闭答案

【问题标题】：ReactJs Collapse toglles-off after being openedReactJs Collapse 打开后关闭
【发布时间】：2019-03-27 05:03:03
【问题描述】：

我正在尝试在我的表单上执行可折叠元素。我正在使用 react-bootstrap。

我期望的行为如下：一旦我点击按钮“点击”，就会出现放在<Collapse /> 中的内容，并一直保持到我再次点击同一个按钮。

我的行为：一旦我点击按钮“点击”，一个折叠的元素出现然后消失。

我刚刚从 react-bootstrap Collapse 示例 (https://react-bootstrap.github.io/utilities/transitions/) 的文档中复制了代码。他们网站上的示例运行良好。正如我注意到的那样，为两个示例（在我的机器上和来自文档）设置的样式是相同的。那么，为什么会发生这种情况以及如何解决呢？

Index.cshtml

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/dist/bundle.css" />
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand fixed-top dev">
        <div>Character bio</div>
      </nav>
    </header>

    <main role="main" class="container mt-5">

      <div id="content" class="row text-center mt-5">

      </div>

      <div class="row text-center mt-5 mb-3">
        <div class="col">
          <p className="text-muted">© 2018</p>
        </div>
      </div>
    </main>

    <script src="~/dist/bundle.js"></script>
  </body>
</html>

app.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import "../css/common.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faDice } from "@fortawesome/free-solid-svg-icons";
import { faHighlighter } from "@fortawesome/free-solid-svg-icons";

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./routing/routes.jsx";
import { BrowserRouter, Link } from "react-router-dom";

import { Button, Collapse, Well } from "react-bootstrap";


library.add(
  faDice,
  faHighlighter
);

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.setState({ open: !this.state.open })}>
          click
        </Button>
        <Collapse in={this.state.open}>
          <div>
            <Well>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Well>
          </div>
        </Collapse>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("content")
)

module.hot.accept();

发生了什么的 gif：https://dropmefiles.com/C7NPU（抱歉链接，gif 大于 2 Mb）

附：我用谷歌搜索了这个问题，但什么也没找到（即来自 stackoverflow 的链接不起作用）。

【问题讨论】：

标签： reactjs collapse react-bootstrap

【解决方案1】：

经过一个晚上，头脑清醒，我意识到（只是准确地重新阅读了文档）我应该使用 Bootstrap v3，而不是 v4（我想使用它）。问题是，v4 不知何故没有 .collpase.in 类。快速解决方法是使用display: block 添加此类。现在它工作得很好。

【讨论】：