无法从 React CSS 过渡切换回“主”菜单答案

【问题标题】：Can't switch back to 'main' menu from React's CSSTransitions无法从 React CSS 过渡切换回“主”菜单
【发布时间】：2021-07-14 01:31:48
【问题描述】：

基本上我有一个用悬停激活的侧边栏，它有用 react-transition-group CSSTransition 元素激活的子菜单。我可以从按钮访问子菜单，但是当我单击应该返回“主”菜单的按钮时，屏幕变为空白。我没有看到我错过了什么。：/

这里是代码的概述。

const [activeMenu, setActiveMenu] = React.useState('main')

return (

<>

<CSSTransition 
  in={activeMenu === 'main'}
  unmountOnExit
  timeout={500}
  classNames="menu-primary">
    <div className="menu">
        <button onClick={() => setActiveMenu('sub1')}>sub1</button>                    
    </div>
</CSSTransition>

<CSSTransition 
  in={activeMenu === 'sub1' || activeMenu === 'sub2'}
  unmountOnExit
  timeout={500}
  classNames="menu-secondary">
    <div className="menu">
        <button onClick={() => setActiveMenu('main')}></button>
    </div>
</CSSTransition>

</>

)

【问题讨论】：

标签： reactjs react-transition-group reactcsstransitiongroup

【解决方案1】：

我担心这个 sn-p 会产生编译错误，因为 React JSX sn-ps 必须被包装，即它们只能是一个最外层的元素。

【讨论】：

老实说，我在这里完全错了，真的很抱歉，因为在我的代码中我实际上已经包装了所有内容，但我不想用代码填满屏幕，这让我忘记了一些重要的细节。我最新的假设是，由于创建这些按钮的反应元素之间的功能范围问题，我无法回到“主”，因为“主”有一个反应元素来创建其按钮和所有“子”菜单有另一个反应元素来创建按钮。可能是错的。
不，不是这样。尝试将所有内容都包含在一个反应元素中，但仍然没有成功。从（我的反应元素名称）返回相同的错误，即使它已经清楚呈现，因为我可以看到子菜单并与之交互但是当我尝试返回主菜单时，它给了我这个指向元素的错误生成子菜单。任何想法为什么？