React Bootstrap Accordeon 遍历地图

Question

我正在使用 react-bootstrap 来创建手风琴。为什么我的手风琴不工作。它不会折叠或滑落，它根本不会对我的点击做出反应！这是我的问题的简化版本： Html:

<div class="container" id="app">
</div>

Javascript:

var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

var AcEntry = React.createClass({
  render(){
    return(
      <Panel header={this.props.name} eventKey={this.props.id}>
        {this.props.text}
      </Panel>
      )
  }
});


var App = React.createClass({
  render(){
    var entries=[
      {id:1, name: "first entry", text:"first sample text"},
      {id:2, name: "second entry", text:"second sample text"}
    ];
    return (
      <Accordion>    
        {entries.map(function(entry){
          return <AcEntry name={entry.name} id={entry.id} text={entry.text} />
        })}
      </Accordion>    
    )
  }
});

ReactDOM.render(<App/>, document.getElementById("app"));

我知道之前提到过这个问题但是提供的解决方案非常丑陋。

Answer 1

解决方法如下：

var Button=ReactBootstrap.Button;
var Accordion = ReactBootstrap.Accordion;
var Panel = ReactBootstrap.Panel;

var AcEntry = React.createClass({
render(){
  return(
    <div>
      {this.props.text}
    </div>
    )
}
});


var App = React.createClass({
render(){
  var entries=[
    {id:1, name: "first entry", text:"first sample text"},
    {id:2, name: "second entry", text:"second sample text"}
  ];
  //Do not wrap Panel by anything in your map!
  return (
    <Accordion>    
      {entries.map((entry)=>(
        <Panel header={entry.name} eventKey={entry.id}>
          <AcEntry text={entry.text}/>
        </Panel>))}
    </Accordion>    
  )
}
});

ReactDOM.render(<App/>, document.getElementById("app"));

所以只有一个注意事项：不要用地图中的任何东西包裹面板！

Answer 2

您应该在 AcEntry 级别添加 eventKey 道具，并通过 Panel 传递 AcEntry 组件的所有 props 以使 Accordion 工作 properly.You 可以像 this

一样修复你的代码

React Bootstrap Accordeon 遍历地图

React Bootstrap Accordeon iterating through map

reactjs

twitter-bootstrap-3

react-bootstrap