如何让折叠面板工作？

我正在使用reactbootstrap并试图创建这个codepen让它工作，但没有运气sofar。这是应该打开和关闭面板：如何让折叠面板工作？

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 有在控制台中没有错误，所以不知道是怎么回事。

来源

2016-11-11 bier hier

在执行代码时你犯的错误很少。

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

如果你正在尝试做的这codepen你不该“T导入您的组件，如

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

来源

2016-11-11 03:41:31

老兄，它不工作的演示？ –

@bierhier对不起错误的演示网址添加。更新它刚刚 –

你知道如何确保内容不会被推下面板下吗？ –

React bootstrap需求bootstrap.css正常工作。所有的转换都是基于bootstrap class。所以，bootstrap css是必需的。

添加到您的HTML

https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css

工作小提琴： http://codepen.io/pranesh-r/pen/MbKrRB

希望这有助于！

来源

2016-11-11 04:36:36

这不是我的答案 –

如何让折叠面板工作？

回答

相关问题