我想在 React 中的 Click 处理程序上添加展开或折叠表格行的转换

Question

我有一个纯 HTML 表格。我有一个正在显示的元素列表，所有 tr 标签都有一个按钮，可以通过单击按钮来显示一些额外信息。背景颜色属性在 .opened className 中起作用，但在过渡中不起作用，这是为什么？

// Component
      <tr>
        <td></td>
          ... Main Information
        <td></td>
      </tr>

// This is the extra information I want to display, It's displaying the message but I want a transition.

      {open && (
        <tr className={`table-row ${open ? "opened" : ""}`}>
          <td colSpan={5}>
            <div>Created By: {user.username}</div>
            <div>{note.body}</div>
          </td>
        </tr>
      )}

// Css file

.table-row {
   max-height: 0;
   overflow: hidden;
   transition: max-height 12s ease;
}

.opened {
   max-height: 15rem;
   background-color: #007bff;
}

我也尝试了 display: block 和 inline-block ，但没有成功。

Answer 1

你的js中不需要

open&&

条件。因为你已经在 css 中通过

overflow:hidden

处理它了。

只需从代码中删除

open&&

，您的转换就会顺利进行。 顺便说一句，12秒是一个很长的时间。