动态子类的类名称React

Question

I have a set of buttons created from an array, however I'm unsure how to set individual classNames for them. Is there an easy way to this?

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>
    )
  }

});

I've tried className={this.props.key} but that doesn't seem to work. Thanks for any help!

Answer 1

Since React v0.12 key and ref are removed from props :

You can no longer access this.props.ref and this.props.key from inside the Component instance itself. So you need to use a different name for those props.

That is why setting className={this.props.key} wont work. But you can try this:

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

and then

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

Related question: This.key in React.js 0.12