Question

我对React相当陌生，并努力实现每个页面动态的侧边栏，并且动画不应该停止导航应用程序的核心内容。

以下是该应用的根目录。

<Router>
    <div className="app-container">

      <LeftSidebar sidebarState={ this.state.sidebar.left } />
      <RightSidebar sidebarState={ this.state.sidebar.right } />

      <div
        style={{
          marginLeft: (this.state.sidebar.left.open ? this.state.sidebar.left.width : 0),
          marginRight: (this.state.sidebar.right.open ? this.state.sidebar.right.width : 0)
        }}
        className='app-content'>
        <Toolbar toggleSidebar={ this.toggleSidebar } />
        <Switch>
          <Route exact path="/" component={ Dashboard } />
          <Redirect from="/dashboard" to="/" />
          <Route path="/gear" render={ (props) => <Gear {...props} toggleSidebar={ this.toggleSidebar } /> } />
          <Route component={ PageNotFound } />
        </Switch>
      </div>

    </div>
  </Router>

顶部的侧边栏，左右两侧绝对定位。（这些设置为-100％和100％转换为动画输入和输出，应用内容移动边距具有相同的转换）
app-content div包含主要内容，即活动组件。

我正在处理/gear组件，并且我添加了一个侧边栏来编辑项目，但我希望边栏可用，因为我很可能会使用它在其他观点中。

为了尝试解决这个问题，我为齿轮侧边栏制作了一个新组件（并根据需要制作其他侧边栏组件）并将其移动到齿轮组件中，然后使用门户将其移动到车身，以便正确设计样式。然后我通过传递一个toggleSidebar函数来切换它，该函数只是在给定方的状态中翻转一个布尔值。这种方式有效，但在页面之间导航时，我尝试使用ReactCSSTransitionGroup，但我不希望主内容等待超时，因为它可能会在新组件加载时发生。

因为我需要加载侧边栏并在其所连接的组件卸载时打开动画关闭，所以只有将其移动到父级才有意义。

唯一的问题是，如何在侧边栏中加载动态传递的组件，然后更容易解决，在加载之前等待超时，以便可以进行动画。

我正在考虑将一个函数传递给正在导航的组件，可以执行该组件以传递要在侧栏中渲染的组件。它需要成为一个组件，因为它仍然需要附加方法等。

否则，我认为使用路由器可能会有效，但我不确定是否可以在卸载它们时暂停（如果打开）以防止它被移动到另一条路径。

最后，我现在让它工作的唯一方法是，如果我详细地定义侧边栏并根据路线安装它们，基本上是自定义反应路由器。

真的很挣扎，任何帮助都会受到赞赏。

如何使用动画管理动态侧边栏的状态？

0 个答案: