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

Question

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

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

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>
        );
    }
}

如您所见，我有条件地将类 active 添加到感兴趣的列表项。样式表代码为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;
            }
        }
    }
}

使用此设置，活动项目未使用 active CSS代码。我该如何解决这个问题？

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

Answer 1

我需要尝试一下才能对此有信心，但是我认为您应该使用styles.active而不是'active’。

Answer 2

您的条件会由于以下条件而在类名中留下空白：

(index === activeTabIndex) ? 'active' : ''

相反，您可以进行短路评估：

<a className={(index === activeTabIndex) && styles['active']} href="#">
  <span>{item.header}</span>
</a>