React-Bootstrap手风琴无法正常工作

问题描述

我正在尝试学习反应。放手一搏，我正在尝试使用react-bootstrap并尝试使用react-bootstrap手风琴来实现手风琴。首先，我尝试使用ButtonToolBar，它工作正常。

I'm trying to learn react. Giving it a go, I was experimenting with react-bootstrap and was trying to implement accordion using react-bootstrap accordion. First I tried using ButtonToolBar, it worked fine.

var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Button = ReactBootstrap.Button;
var buttonsInstance = (
    <ButtonToolbar>
      <Button>Submit</Button>
      <Button>Cancel</Button>
    </ButtonToolbar>
);

React.renderComponent(
    buttonsInstance,
    document.getElementById('app')
);

但是，react-bootstrap的手风琴代码无效。它显示的是内容，但与手风琴的情况不同。代码如下：

But, react-bootstrap's accordion code wasn't working. It was showing the contents but not like we've in case of accordion. Here's the code:

var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

var accordionInstance = (
    <Accordion>
      <Panel header="Collapsible Group Item #1" key={1}>
        Content1
      </Panel>
      <Panel header="Collapsible Group Item #2" key={2}>
        Content2
      </Panel>
      <Panel header="Collapsible Group Item #3" key={3}>
        Content3
      </Panel>
    </Accordion>
);

React.renderComponent(
    accordionInstance,
    document.getElementById('app')
);

我也尝试使用，它的表现也一样。我正在从获得帮助。

I also tried using , it also behaved the same. I was taking help from here.

在有类似的问题。但是，就我而言，如果不自定义ReactBootstrp.Panel，就无法使用它。

There's a similar question here. But, in my case I can't have it working in without customizing the ReactBootstrp.Panel.

任何想法，如何使它起作用？

Any Idea, how can I get it work?

推荐答案

因此，我希望您已经找到问题的答案，但是以下代码应该可以工作。我想您只需要将 key = {} 更改为 eventKey = {} ，让我知道这是否不是为您工作。

So I hope that you've already found the answer to your question, but the following code should work. I think you simply need to change key={} to eventKey={} Let me know if this doesn't work for you.

var React = require('react');
var ReactPropTypes = React.PropTypes;
var Accordion = require('react-bootstrap').Accordion;
var Panel = require('react-bootstrap').Panel;

var LeftSideInfo = React.createClass({
render: function () {
    var open = 3;
    return (
      <Accordion>
        <Panel header="Recommended Assignments" eventKey='1'>
          Some Info here
        </Panel>
        <Panel header="Candidate Information" eventKey='2'>
          More Info here
        </Panel>
        <Panel header="Contact Information" eventKey={open}>
          Yet another Panel
        </Panel>
       </Accordion>
    );
  }
});

module.exports = LeftSideInfo;

作为旁注，我试图弄清楚如何阻止它在关闭时关闭一个面板单击另一个打开。我想我只需要玩 eventKey

As a side note, I'm trying to figure out how to stop it from closing one panel when another one is clicked open. I think I just need to play with the eventKey

这篇关于React-Bootstrap手风琴无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！