使用React进行Bootstrap：手风琴无法正常工作

Question

我试图让一个自举式手风琴运行，我的面板是React类。 以某种方式这不起作用：

<ReactBootstrap.Accordion>
   <WontWorkPanel pkey={1} />
   <WontWorkPanel pkey={2} />
</ReactBootstrap.Accordion>

http://jsfiddle.net/3azxcquh/

WontWorkPanel是React类，使用键this.props.pkey渲染单个面板。

有人可以向我解释我做错了什么，或者如何做得更好？

谢谢！

Answer 1

手风琴使用新的道具克隆其子代，这些道具控制Panel组件的显示/隐藏。 为了使它仍然可以与自定义Panel包装一起使用，您需要将道具从包装转移到Panel子对象：

小提琴： 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>
    );
  }
});