javascript React-bootstrap 手风琴无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27012800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-bootstrap accordion not working properly
提问by mAc
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.
我正在努力学习反应。试一试，我正在尝试使用 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')
);
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:
但是，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')
);
I also tried using , it also behaved the same. I was taking help from here.
我也试过使用，它的表现也一样。我从这里得到帮助。
There's a similar question here. But, in my case I can't have it working in without customizing the ReactBootstrp.Panel.
有一个类似的问题在这里。但是，就我而言，如果不自定义 ReactBootsrp.Panel，我就无法使用它。
Any Idea, how can I get it work?
任何想法，我怎样才能让它工作？
回答by BryceHayden
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.
所以我希望您已经找到了问题的答案，但以下代码应该可以工作。我认为您只需要更改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;
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
作为旁注，我试图弄清楚如何在单击打开另一个面板时阻止它关闭一个面板。我想我只需要玩eventKey
回答by vkrish98
Use Panels separately to keep multiple panels open. Accordion will collapse the inactive panels automatically.
单独使用面板以保持多个面板打开。Accordion 将自动折叠非活动面板。
