如何使用有条件和动态的类名库类

Question

我开始使用 classnames 库，在遇到这种情况之前，它非常简单明了。

我想做一个可展开的行动画。想法很简单 - 有条件地添加 class 将动画添加到打开的行。在我的例子中，扩展行的高度是动态的。

这是我简化的 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。

非常感谢您的帮助！

Answer 1

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

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

如何使用有条件和动态的类名库类

How to use classnames lib with conditional and dynamic classes

css

reactjs

class-names

如何使用有条件和动态的类名库 类

How to use classnames lib with conditional and dynamic classes

css

reactjs

class-names

如何使用有条件和动态的类名库类