我怎样才能让折叠面板工作？

Question

我正在使用 reactbootstrap 并尝试创建此 codepen 以使其正常工作，但到目前为止运气不佳。这是应该打开和关闭的面板：

import { Button } from 'react-bootstrap';
import { Panel } from 'react-bootstrap';
import { Fade} from 'react-bootstrap';
import { Collapse } from 'react-bootstrap';
    class App extends React.Component {
      constructor() {
        super();
        this.state = {};
      }

      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>
        );
      }

    };

这是codepen 控制台中没有错误，所以不知道发生了什么。

Answer 1

你在实现 codepen 时犯的错误很少。

您需要在 html 中导入 bootstrap.min.css 和 bootstrap.min.js 才能使用 react-bootstrap
您没有导入 Well 组件

如果您尝试在 codepen 中执行此操作，则不应像

那样导入您的组件

import { Button } from 'react-bootstrap';
import { Panel } from 'react-bootstrap';
import { Fade} from 'react-bootstrap';
import { Collapse } from 'react-bootstrap';
import {Well} from 'react-bootstrap';

相反，您应该像

一样导入它们

    var Button = ReactBootstrap.Button;
    var Panel = ReactBootstrap.Panel;
    var Fade = ReactBootstrap.Fade;
    var Collapse = ReactBootstrap.Collapse;
    var Well = ReactBootstrap.Well;

Codepen Demo

我怎样才能让折叠面板工作？

How can I get the collapse panel to work?

reactjs

codepen