Bootstrap with React:手风琴不起作用 [英] Bootstrap with React: accordion won't work
问题描述
我正在尝试运行引导手风琴,其中我的面板是 React 类.不知何故,这不起作用:
I am trying to get a bootstrap accordion running, where my panels are React classes. Somehow this doesn't work:
<ReactBootstrap.Accordion>
<WontWorkPanel pkey={1} />
<WontWorkPanel pkey={2} />
</ReactBootstrap.Accordion>
WontWorkPanel
是 React 类,它使用键 this.props.pkey
呈现单个面板.
The WontWorkPanel
is React class that renders the single panel with the key this.props.pkey
.
谁能解释一下我做错了什么,或者如何做得更好?
Could someone explain me what I'm doing wrong, or how to do it better?
谢谢!
推荐答案
Accordion 使用新的 props 克隆它的孩子,这些 props 控制 Panel
组件的显示/隐藏.为了允许它仍然与自定义 Panel
包装器一起工作,您需要将道具从包装器传输到 Panel
子项:
The Accordion clones its children with new props, and those props control the showing/hiding of the Panel
component. To allow that to still work with a custom Panel
wrapper, you need to transfer props from the wrapper to the Panel
child:
小提琴:http://jsfiddle.net/ssorallen/3azxcquh/6/
var WontWorkPanel = React.createClass({
render: function() {
return this.transferPropsTo(
<ReactBootstrap.Panel header={"WontWork " + this.props.key} key={this.props.key}>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua pu
</ReactBootstrap.Panel>
);
}
});
这篇关于Bootstrap with React:手风琴不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!