动态子项的类名 反应

Class names for dynamic children React

本文关键字：反应 动态      更新时间：2023-09-26

我有一组从数组创建的按钮，但是我不确定如何为它们设置单独的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}，但这似乎不起作用。感谢您的任何帮助！

由于 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>

相关问题：这.key在 React 中.js 0.12

相关文章：