javascript - React Hooks 与 ReactCSSTransitionGroup 不起作用

Question

我有以下虚拟项目，其中包含一个下拉菜单:

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;

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

您能提供一下可以实现此目的的代码吗？

如果可能的话，您可以提供 fork 的codesandbox.io。

谢谢!

Answer 1

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

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

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

但是，当用钩子(Hook)重新实现它时，您将菜单初始化为函数

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>
);