React Bootstrap Accordeon перебирает карту

Я использую 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"));

Я знаю, что эта проблема упоминалась ранее react-bootstrap Accordion не рушится с картой Но предложенное решение ужасно уродливо.


reactjs react-bootstrap twitter-bootstrap-3
person kurumkan    schedule 20.09.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны добавить реквизит eventKey на уровне AcEntry и передать все props из AcEntry компонентов через Panel, чтобы Accordion работало правильно. Вы можете исправить свой код, например это

person Phi Nguyen    schedule 20.09.2016

arrow_upward
0
arrow_downward

Вот решение:

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 в свою карту!

person kurumkan    schedule 20.09.2016