React Bootstrap Accordeon地図を反復する

Question

私は反応ブートストラップを使って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

あなたはAcEntryレベルでeventKey小道具を追加し、Accordion仕事properly.Youを作るためにPanelを通じてAcEntryコンポーネントのすべてpropsを渡す必要があり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")); 

だから、一つだけ注意： は、あなたのマップには何もして、パネルをラップしないでください！