0

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

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

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

非常感谢您的帮助！

4

1 回答 1

0

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

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

于 2020-06-30T16:30:42.747 回答