ReactJS - 在表格行上使用 slideDown（切换）？答案

【问题标题】：ReactJS - use slideDown (toggle) on a table row?ReactJS - 在表格行上使用 slideDown（切换）？
【发布时间】：2017-02-11 22:38:22
【问题描述】：

我在 React (JSX) 中有一个表，我想通过单击它们上方的一行来切换某些行（甚至多行）。

让它们消失很容易，但我怎样才能顺利完成（slideDown 和 slideUp）？

Min-height 似乎不起作用，我也无法将整个 tr 包装到 div 中，因为它在 React 中。谢谢。

  <table>
    <tbody>
      <tr>
        <td>main row - onclick toggle the rows under</td>
        <td></td>
      </tr>           
      <tr>
          <td>show only if clicked on the row above (smoothly)</td>
          <td></td>
        </tr>
      <tr>
        <td>show only if clicked on the first row (smoothly)</td>
        <td></td>
      </tr>
    </tbody>
  </table>

【问题讨论】：

好像animations are not supported on table rows.
是的，我知道这一点，但肯定有人必须找到一些巧妙的解决方法。
我遇到了类似的问题，我最终使用了 div 而不是 table。

标签： jquery css reactjs css-animations

【解决方案1】：

这应该对你有帮助！

使用state 跟踪点击并使用css 为height 更改设置动画。

检查这个小提琴：

https://jsfiddle.net/pranesh_ravi/x7q88qpe/1/

【讨论】：