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

问题描述

• 我是React JS的新手。


• 我正在尝试使用npm package classnames来组合我的类。


• 但它不工作：

• 你们可以告诉我有什么问题吗？ ？它在这一行：
  
  

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




• 提供以下代码：
  
  

   从'classnames'导入CombineClassName; 
   
   
   
   
   
   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}`
  

您实际上未调用模块 $

1. 
   
2. 使用字符串文字覆盖模块。
   

$ b

classnames 确实可靠，并且应该帮助您弄清楚。

基本上，您想要传入 classnames 方法，任何将评估为真。任何评估为 false 的东西都将被排除。考虑到这一点，你实际上可以在方法中包含你的逻辑，并且它会评估并返回正确的类名。

我重写了<$ c $

 函数标签（child，index）{c>标签方法有点帮助您。 
 let isActive = this.state.selected === index; 
 let content = isActive？ this.props.children [this.state.selected]：null; 
 let managedProductActivationDate = this.props.accountInfo.managedProductActivationDate; 
 
 const class = classnames（
 child.props.liClass，
 {
'first-time-active'：:( managedProductActivationDate === undefined || managedProductActivationDate = ==''），
'ft-prev-day'：managedProductActivationDate！==''
} 
）
 
 return（
< li role ='presentation'key = {index} className = {classes}> 
  href ='＃'
 className = {`sports-tab-header`} 
 onClick = {this.handleClick.bind（this，index）}> 
< h2> {child.props.label}< / h2> 
< p className =sports字幕> {child.props.subtitle}< / p> 
< / a> 
 {内容} 
< / li> 
）; 
} 
  

• I am new to React JS.
• I am trying to combine my classes using npm package classnames. https://www.npmjs.com/package/classnames
• but it's not working:

• can you guys tell me what's the problem? It's in this line:

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

• providing code below:

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

解决方案

For simplicity and legibility - import the classnames modules as classnames. This will make it easier to read everything later, and you won't be second guessing what goes where.

The main issue you have in the code above is this line:

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

You were

1. not actually calling the module
2. overwriting the module with the string literal.

The classnames documentation is really solid, and should help you figure things out as well.

Essentially, you want to pass into the classnames method any thing that will evaluate to true. Anything that evaluates to false will be excluded. With this in mind you can actually include your logic right inside the method, and it will evaluate and return the correct class names for you.

I rewrote the labels method a little to help you out.

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安装classnames不能在我的li标签中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！