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

如何让折叠面板工作？

1 个答案: