如何将类名库与条件类和动态类一起使用答案

【问题标题】：How to use classnames lib with conditional and dynamic classes如何将类名库与条件类和动态类一起使用
【发布时间】：2020-10-20 04:07:37
【问题描述】：

我开始使用classnames lib，在我遇到这种情况之前，它非常简单整洁。

我想制作一个可展开的行动画。想法很简单 - 有条件地添加将动画添加到打开行的类。就我而言，展开行的高度是动态的。

这是我简化的 React 组件

// some code

const expanded = {
    maxHeight: heightProp,
    transition: 'max-height 1s ease-out';
  };

  const expandable = classnames({
    [styles.expandableContainer]: true,
    [expanded]: isExpanded,
  });

return (
   <tr ref={rowRef} className={expandable}></td>
)

// some code

CSS 文件

.expandableContainer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in;
}

现在它给了我class="expandableContainer [object Object]" 处于展开状态的结果。这里的问题在哪里？为什么是objectObject？

如果这个heightProp 不是动态的，它只是

const expandable = classnames({
    [styles.expandableContainer]: true,
    [styles.expanded]: isExpanded,
  });

但看起来我不知道如何处理组件内定义的 css。

非常感谢您的帮助！

【问题讨论】：

标签： css reactjs class-names

【解决方案1】：

好的答案是不要使用classnames，只使用

<tr className={styles.expandableContainer} style={isExpanded ? expanded : null}></tr>

【讨论】：