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遍歷映射

回答

相關問題