React - 使用 CSS 模块将 **active** 类应用于元素

Question

我正在深入研究 React，我发现在使用 CSS 模块时管理活动类名时遇到了一个小问题。

假设我想开发一个 Tabs React 组件。我想将活动类应用于当前列表项。选项卡标题由以下组件构建：

import React, { Component } from 'react';
import styles from './Tabs.scss';

export default class TabHeader extends Component {

    render() {
        let activeTabIndex = this.props.activeTabIndex;

        return (
            <ul className={styles['tabs-header']}>
                {
                    this.props.data.map((item, index) => {
                        return (
                            <li key={index}>
                                <a className={(index === activeTabIndex) ? 'active' : ''} href="#">
                                    <span>{item.header}</span>
                                </a>
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
}

如您所见，我有条件地将活动类添加到感兴趣的列表项中。样式表代码是 Tabs.scss：

.tabs-header {
    display: table;
    width: 100%;
    list-style-type: none;

    & li {
        display: table-cell;
        text-align: center;
        color: #ECF0F1;
        cursor: pointer;

        a {
            display: block;
            padding: 15px;
            background: #212F3D;
            transition: all .2s ease-in;
            transform: skew(-40deg);

            &:hover {
                background: #2471A3;
                color: #F7F9F9;
            }

            & span {
                display: block;
                transform: skew(40deg);
            }

            &.active {
                background: #2471A3;
            }
        }
    }
}

使用此设置，活动项目不使用活动css 代码。我该如何解决问题？

编辑：道具activeTabIndex（大于或等于零的整数）正常工作。如果我检查元素，我可以看到active添加到活动项列表中的类，但它没有指向 Tabs.scss 中定义的类。只是要指出这一点，className={styles['tabs-header']}在ul元素中使用时， this 将被转换为Tabs__tabs-header__2LSPG.

Answer 1

我需要尝试一下有信心的，但我认为你应该使用styles.active的替代'active’。