reactjs - 如何让折叠面板工作？

Question

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

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 时犯的错误很少。

1. 您需要在您的 html 中导入bootstrap.min.css和bootstrap.min.js才能使用react-bootstrap

2. 您没有导入Well组件

3. 如果您尝试在 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 演示