reactjs - React - 碳设计系统 - 右侧边栏中的转换不起作用

Question

我正在尝试将 Carbon Design System 用于一个项目，我需要一些有关 UI Shell 的帮助。

右侧边栏的过渡无法正常工作。

这是一个工作示例，看看它打开和关闭的流畅程度（见现场示例）：

这是有问题的示例。没有过渡（参见现场示例）：

我认为这与高阶组件的工作方式有关。这是我的理论：

HeaderPanel正在渲染内部HeaderContainer，这是一个高阶组件。
当状态变量switchCollapsed发生变化时，HeaderContainer会再次完全渲染。
所以这可以解释为什么没有过渡。
我是 React 新手，这个理论是基于我迄今为止的 React 知识。如果我错了请纠正我

这是第二个示例的一段代码（为了这篇文章的简洁而简化）。在此处查看完整代码

class App extends React.Component {
  constructor(props) {
    super(props);
    this.toggleSwitch = this.toggleSwitch.bind(this);
    this.state = { switchCollapsed: true };
  }

  toggleSwitch() {
    this.setState(state => ({
      switchCollapsed: !state.switchCollapsed
    }));
  }

  render() {
    return (
      <div className="container">
        <HeaderContainer
          render={({ isSideNavExpanded, onClickSideNavExpand }) => (
            <>
              <Header aria-label="IBM Platform Name">
                <HeaderMenuButton
                  onClick={onClickSideNavExpand}
                  isActive={isSideNavExpanded}
                />
                <HeaderGlobalBar>
                  <HeaderGlobalAction onClick={this.toggleSwitch}>
                    <UserAvatar20 />
                  </HeaderGlobalAction>
                </HeaderGlobalBar>
                <HeaderPanel
                  aria-label="Header Panel"
                  expanded={!this.state.switchCollapsed}
                />
                <SideNav
                  aria-label="Side navigation"
                  expanded={isSideNavExpanded}
                >
                  <SideNavItems>
                  </SideNavItems>
                </SideNav>
              </Header>
              <StoryContent />
            </>
          )}
        />
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));

此外，如果我更改 React Dev Tools 上的属性，则转换工作！

标签： reactjshigh-order-componentcarbon-design-system