使用 ReactCSSTransitionGroup 的 React Hooks 不起作用答案

【问题标题】：React Hooks with ReactCSSTransitionGroup not working使用 ReactCSSTransitionGroup 的 React Hooks 不起作用
【发布时间】：2019-10-29 06:56:50
【问题描述】：

我有以下包含下拉菜单的虚拟项目：

https://codesandbox.io/s/react-dropdown-class-wtzuf

（点击左上角的“+”按钮）

这里是源代码：src\components\header\header.jsx。

import React from 'react';
import './header.scss'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.toggleMenu = this.toggleMenu.bind(this);
    this.state = {
      menuActive: false
    };
  }

  toggleMenu() {
    let menuState = !this.state.menuActive;
    this.setState({
      menuActive: menuState
    });
  }

  render() {
    let menu;
    if (this.state.menuActive) {
      menu = <div className="dropdown">
                <ul>
                  <li>First Item </li>
                  <li>Second Item </li>
                  <li>Third Item </li>
                </ul>
              </div>
    } else {
      menu = "";
    }
    return ( 
      <div id="menu">
        <button href="#" onClick = { this.toggleMenu }>+</button> 
        <ReactCSSTransitionGroup transitionName="menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}> 
          {menu} 
        </ReactCSSTransitionGroup>
    </div>
    )
  }
}

export default Header;

我的目标是：将上面的示例转换为使用React Hooks。

我在这个链接上做了一个实验：

https://codesandbox.io/s/react-dropdown-hooks-8nvut

但没用。

这是我尝试过的：

import React, { useState } from 'react';
import './header.scss'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

function Header() {

  const [menuActive, setMenuActive] = useState(false);
  const toggleMenu = () => { setMenuActive(!menuActive) };

  let menu = () => menuActive? <div className="dropdown">
                              <ul>
                                <li>First Item </li>
                                <li>Second Item </li>
                                <li>Third Item </li>
                              </ul>
                            </div>: ""
  return ( 
    <div id="menu">
      <button href="#" onClick = { toggleMenu }>+</button> 
      <ReactCSSTransitionGroup transitionName="menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}> 
        {menu}
      </ReactCSSTransitionGroup>
  </div>
  )

}

export default Header;

使用最后一个代码，下拉菜单无法打开。

能否请您提供解决问题的代码？

如果可能的话，也许您可以提供分叉的codesandbox.io。

谢谢！

【问题讨论】：

我已经检查了沙箱中的代码，我怀疑这个问题与css 有关，因为钩子工作正常

标签： javascript reactjs react-hooks

【解决方案1】：

您可以查看 Header.jsx 上的代码并仔细检查您的菜单

在您与类组件的第一个链接上，这是代码

menu = <div className="dropdown">
  <ul>
    <li>First Item </li>
    <li>Second Item </li>
    <li>Third Item </li>
  </ul>
</div>

但是，当使用钩子重新实现它时，您将菜单初始化为一个函数

menu = () => menuActive ?
  <div className="dropdown">
    <ul>
      <li>First Item </li>
      <li>Second Item </li>
      <li>Third Item </li>
    </ul>
  </div>
: null;

如果你想把它作为一个函数，你应该调用menu函数

return ( 
  <div id="menu">
    <button href="#" onClick={toggleMenu}>+</button> 
    <ReactCSSTransitionGroup transitionName="menu" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}> 
      {menu()}
    </ReactCSSTransitionGroup>
  </div>
);

【讨论】：