我正在努力学习反应。放手一搏,我正在尝试使用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')
);
我也试过使用,它也表现得一样。我从here获得了帮助。
有一个类似的问题here。但是,在我的情况下,如果没有自定义ReactBootstrp.Panel,我就无法使用它。
任何想法,我怎样才能让它发挥作用?
答案 0 :(得分:5)
所以我希望您已经找到了问题的答案,但以下代码应该可行。我认为您只需将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
答案 1 :(得分:0)
单独使用面板以保持多个面板打开。 Accordion将自动折叠非活动面板。
答案 2 :(得分:0)
问题出在beta 8版本上。 使用npm,我react-bootstrap@1.0.0-beta.9解决了该问题。