Question

我正在使用react-bootstrap来创建accordeon。为什么我的手风琴不起作用。它不会崩溃，也不会向下滑动，它根本不会对我的点击做出反应！这是我的问题的简化版本： 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"));

我知道在react-bootstrap Accordion not collapsing with map之前提到过这个问题但提供的解决方案非常难看。

Answer 1

您应该在eventKey级别添加AcEntry道具并通过props传递所有AcEntry个Panel组件，以便Accordion正常工作。您可以像this

那样修复代码

Answer 2

以下是解决方案：

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"));

所以只有一个注意事项：不要在地图上用任何东西包裹Panel！

React Bootstrap Accordeon迭代地图

2 个答案: