React Bootstrap Accordeon遍历映射

我正在使用react-bootstrap创建accordeon。为什么我的Accordeon不起作用。它不会崩溃或滑落，它不会对我的点击产生反应！这里被简化我的问题的版本： HTML：React Bootstrap Accordeon遍历映射

<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 之前提到过这个问题，但所提供的解决方案是非常难看。

来源

2016-09-20 kurumkan

您应该AcEntry水平通过Panel为了添加eventKey道具，并通过AcEntry的props所有组件，使Accordion工作properly.You可以解决你的代码像this

来源

2016-09-20 07:15:30

这里是解决方案：

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

所以只有一个音符：不要在你的地图包东西面板！

来源

2016-09-20 06:58:25 kurumkan

React Bootstrap Accordeon遍历映射

回答

相关问题