Имена классов для динамических дочерних элементов React

У меня есть набор кнопок, созданных из массива, однако я не уверен, как установить для них отдельные имена классов. Есть ли простой способ сделать это?

var ButtonContainer = React.createClass({

  render: function(){
    var answerList = this.props.answerList.map(function(input, i){
      return <SingleButton key={'button'+i} singleAnswer={input}/>
    }.bind(this));
    return <div> {answerList} </div>
  }

})

var SingleButton = React.createClass({

  render: function(){
    return (
      <div>
        <button className='quiz-button'>{this.props.singleAnswer}</button>     
      </div>
    )
  }

});

Я пробовал className={this.props.key}, но это не работает. Спасибо за любую помощь!


reactjs javascript class dynamic children
person Boyswan    schedule 30.01.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Начиная с React v0.12 key и ref удаляются из props:

Вы больше не можете получить доступ к this.props.ref и this.props.key из самого экземпляра компонента. Поэтому вам нужно использовать другое имя для этих реквизитов.

Поэтому настройка className={this.props.key} работать не будет. Но вы можете попробовать это:

return <SingleButton key={'button'+i} className={'button'+i} singleAnswer={input}/>

а потом

<button className={this.props.className}>{this.props.singleAnswer}</button>

Связанный вопрос: This.key в React.js 0.12

person nilgun    schedule 31.01.2015