React-bootstrap 手風琴無法正常工作

Question

我正在努力學習反應。 試一試，我正在嘗試使用 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')
);

我也試過使用，它的表現也一樣。 我從這里得到幫助。

有一個類似的問題在這里。 但是，就我而言，如果不自定義 ReactBootsrp.Panel，我就無法使用它。

任何想法，我怎樣才能讓它工作？

Answer 1

所以我希望您已經找到了問題的答案，但以下代碼應該可以工作。 我認為您只需將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

Answer 2

單獨使用面板以保持多個面板打開。 Accordion 將自動折疊非活動面板。

Answer 3

問題在於 beta 8 版本。 使用 npm 我 react-bootstrap@1.0.0-beta.9 解決了這個問題。