Question

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

我期望的行为如下：单击按钮“单击”后，内容将放置在<Collapse />中，并保持不变，直到再次单击相同的按钮。

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

我刚刚从react-bootstrap折叠示例（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）

P.S。我已经搜索了这个问题，但没有发现任何问题（即来自stackoverflow的链接不起作用）。

Answer 1

经过一夜通畅后，我意识到（只是准确地重新阅读了文档）我应该使用Bootstrap v3，而不是v4（我要使用）。问题是，v4某种程度上没有.collpase.in类。快速的解决方法是使用display: block添加此类。现在，它工作得很好。

在打开后，ReactJs会崩溃

1 个答案: