javascript - 如何在 React 中为列表元素定义 css 类？

Question

我的 UI 中有一个域列表。每个域都是一个按钮(可以单击它并获得 .active css 样式)。域名来自服务器，我在 componentDidMount() 方法中获取它们。所以我不知道组件构建时刻的 future 按钮(域)的数量。

我的目标是在用户点击时更改按钮样式(添加 .active css 类)。默认情况下，第一个按钮应该处于事件状态。我可以通过数组中的索引来识别按钮。所以我的代码看起来像这样:

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

在 componentDidMount() 方法中:

componentDidMount() {
    this.props.domains.forEach((data, i) => {
        if (i === 0) {
            this.setState({
                ...this.state.domainClasses,
                [i]: `title active`
            });
        } else {
            this.setState({
                ...this.state.titleClasses,
                [i]: `title`
            });
        }
    });
}

我认为 setState() 方法会在 state 对象中添加数字属性，然后我可以在按钮类上操作样式。但事实并非如此!我测试过 - 如果 state 在组件构造时刻不包含数字属性，它将在以后的 setState 中忽略它。

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

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

任何帮助，请!

Answer 1

您正在为按钮设置事件类存储一个可能的巨大状态，为什么不使用像 activeButtonIdx 这样简单的东西呢？

在构造函数中，你的初始状态将是

this.state = {
  activeButtonIdx : 0
}

在你的渲染函数中，你可以只给出类(假设它在 map 中，因为你提到你有一个按钮列表)

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