ReactCSSTransitionGroup不起作用的React Hooks

Question

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

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

(点击左上角带有"+"的按钮(

以下是srccomponentsheaderheader.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。

谢谢！

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