Javascript 如何为React中的列表元素定义css类？

我的UI中有一个域列表。每个域都是一个按钮，它可以被点击并获取.activeCSS样式。域名来自服务器，我在componentDidMount方法中获得它们。所以我不知道组件构造中未来按钮域的数量

我的目标是更改用户单击add.active css类时的按钮样式。默认情况下，第一个按钮应处于活动状态。我可以通过数组中的索引来识别按钮。因此，我的代码如下所示：

constructor(props) {
    super(props)
    this.state = {
        domainClasses: {}
    }
}

在componentDidMount方法中：

我认为setState方法将在state对象中添加数值属性，然后我可以操作按钮类的样式。但事实并非如此！我测试过-若状态在组件构造中不包含数值属性，那个么它将在将来的setState中忽略它

为了解决这个问题，我可以在forEach循环中将每个数值属性添加到构造函数方法中的state对象，但我不知道域的数量，直到它们来自componentDidMount中的服务器

所以，我的问题是-如果这个按钮在列表中并且数量在服务器响应之前是未定义的，那么如何更改按钮单击时的css类

---

请帮忙

您正在存储一个可能的巨大状态，以便只为按钮设置活动类，为什么不使用类似activeButtonIdx的简单方法呢

在构造函数中，您的初始状态为

this.state = {
  activeButtonIdx : 0
}

在我们的render函数中，您可以假定类在一个映射中，因为您提到您有一个按钮列表

{
  buttons.map((d, i) => <Button className={this.state.activeButtonIdx === i ? 'active title' : 'title' } onClick={() => this.setState({activeButtonIndex : i})} key={d.id}/>)
}

{
  buttons.map((d, i) => <Button className={this.state.activeButtonIdx === i ? 'active title' : 'title' } onClick={() => this.setState({activeButtonIndex : i})} key={d.id}/>)
}