javascript - npm install classnames在我的li标签中不起作用

我是React JS的新手。
我正在尝试使用npm包类名来组合我的类。 https://www.npmjs.com/package/classnames
但它不起作用：



  classname未执行首次激活...我使用正确吗？当我正常使用时，该类正在运行。



你们能告诉我什么问题吗？在这行中：

<li role='presentation' key={index} className={`${liClassName} ${className}`}>

在下面提供代码：

import CombineClassName from 'classnames';





        let managedProductActivationDate = this.props.accountInfo.managedProductActivationDate;

        if(managedProductActivationDate === undefined || managedProductActivationDate === '') {
            className = 'first-time-active';
        } else if (managedProductActivationDate !== '') {
            className = `ft-prev-day`;
        }

最佳答案

为了简便起见，将classnames模块导入为classnames。这将使以后阅读所有内容变得更加容易，并且您将不会再猜测会发生什么。

上面代码中的主要问题是以下行：

var CombineClassName = `${liClassName} ${className}`

你之前是


实际上没有调用模块
用字符串文字覆盖模块。


classnames documentation确实很可靠，并且应该也可以帮助您解决问题。

本质上，您希望将任何会评估为classnames的东西传递给true方法。计算结果为false的任何内容都将被排除。考虑到这一点，您实际上可以将逻辑直接包含在方法中，它将为您评估并返回正确的类名称。

我重写了labels方法有点帮助您。

function labels(child, index) {
    let isActive = this.state.selected === index;
    let content = isActive ? this.props.children[this.state.selected] : null;
    let managedProductActivationDate = this.props.accountInfo.managedProductActivationDate;

    const classes = classnames(
      child.props.liClass,
      {
        'first-time-active': (managedProductActivationDate === undefined || managedProductActivationDate === ''),
        'ft-prev-day': managedProductActivationDate !== ''
      }
    )

    return (
        <li role='presentation' key={index} className={classes}>
          <a
            href='#'
            className={`sports-tab-header`}
            onClick={this.handleClick.bind(this, index)}>
              <h2>{child.props.label}</h2>
              <p className="sports-subtitle">{child.props.subtitle}</p>
          </a>
          {content}
        </li>
    );
}