react&antd问题

在工作有一个需求是点击相应的按钮换成<tag>标签相应的颜色，但是按钮没有<tag>标签的那个颜色，于是只能通过style来加。

 

 <Button type={record.status === 1 ? "default" : "primary"} onClick={() => this.buttonChange(2, index)} disabled={disabled} style= {{borderColor: record.status === 2? '#B7EB8F': '', backgroundColor: record.status === 2? '#F6FFED': '',color: record.status === 2? '#52C41A': ''}}>
                误杀
   </Button>

这是原来的写法，但是这样写有很多重复的代码，而且也不美观，于是我在搜索了后换了下面的代码，因为style={}里面接的是一个对象，所以我声明一个方法最后返回一个对象就行了。这种情况适用于对数据状态不同设置不同的样式的情况

<Button type={record.status === 1 ? "default" : "primary"} onClick={() => this.buttonChange(2, index)} disabled={disabled} style= {this.changeButtonColor(record)}>
                误杀
              </Button>

//button按钮点击误杀变成相应的颜色
  changeButtonColor(record){
    let style
    if(record.status === 2){
      style = {
        borderColor: '#B7EB8F',
        backgroundColor: '#F6FFED',
        color: '#52C41A'
      }
      return style
    }
  }