Question

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

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：

您无法再从内部访问this.props.ref和this.props.key Component实例本身。所以你需要使用不同的名称那些道具。

这就是设置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

动态子级的类名React

1 个答案: