javascript - 动态子 React 的类名

Question

我有一组从数组创建的按钮，但是我不确定如何为它们设置单独的类名。有简单的方法吗？

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} 但这似乎不起作用。感谢您的帮助!

Answer 1

自 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.

这就是为什么设置 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 in React.js 0.12