1

我正在尝试将 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 上的属性,则转换工作!

在此处输入图像描述

4

0 回答 0