Question

我是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`;
        }

Answer 1

为了简单和易读 - 将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>
    );
}

npm安装类名不能在我的li标签中工作

1 个答案: