2

我正在努力学习反应。试一试，我正在尝试使用 react-bootstrap 并尝试使用 react-bootstrap 手风琴来实现手风琴。首先我尝试使用 ButtonToolBar，效果很好。

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 的手风琴代码不起作用。它显示了内容，但不像我们在手风琴的情况下那样。这是代码：

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

我也尝试过使用，它的行为也一样。我从这里得到帮助。

这里有一个类似的问题。但是，就我而言，如果不自定义 ReactBootstrp.Panel，我就无法让它工作。

任何想法，我怎样才能让它工作？

4

3 回答 3

6

所以我希望你已经找到了问题的答案，但是下面的代码应该可以工作。我认为您只需要更改key={}为eventKey={}让我知道这是否不适合您。

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

于 2015-02-23T18:27:22.303 回答
0

单独使用面板以保持多个面板打开。Accordion 将自动折叠非活动面板。

于 2017-03-04T03:55:47.300 回答
0

问题在于 beta 8 版本。使用 npm 我 react-bootstrap@1.0.0-beta.9 解决了这个问题。

于 2020-07-14T18:20:55.010 回答