ToggleCollapsed 在导入的侧边栏 reactjs 组件上

Question

使用来自 [office-ui-fabric-react][1] 的边栏组件。

我想让侧边栏以折叠状态启动，但我很难设置 ISidebar 界面的状态来执行此操作。

如何在这个导入的组件上切换折叠？

   export interface ISidebar {
      /**
       * Toggles the sidebar state to put the sidebar in or out of collapsed mode
       * @type {(boolean) => void}
       */
      toggleCollapsed: () => void;
}



    export class SidebarExample extends React.Component {

      public render(): JSX.Element {
        this.state = {
          active: true 
        };    

        return (

          <Sidebar
            id={'sidebar-collapsed'}
            collapsible={true}
            theme={getTheme()}
           />
       )

Answer 1

Public 组件的 Sidebar 方法（例如 toggleCollapsed）可通过 componentRef 访问，例如：

<Sidebar componentRef={initSidebar} />

const initSidebar = (sideBar: ISidebar) => {
  sideBar.toggleCollapsed();
};

例子

最初的collapsed状态可以这样设置：

const initSidebar = (ref: ISidebar) => {
  ref.setCollapsed(true);
};

const SidebarBasicExample: React.SFC<{}> = props => {
  return (
    <Sidebar
      componentRef={initSidebar}
      collapsible={true}
      id={"1"}
      theme={getTheme()}
      items={[
        {
          key: "basic-example-item1",
          name: "Item 1",
          iconProps: { iconName: "BuildQueue" },
          active: false
        },
        {
          key: "basic-example-item2",
          name: "Item 2",
          iconProps: { iconName: "Bullseye" },
          active: true
        }
      ]}
    />
  );
};

Answer 2

在 Vadim 的帮助下，我的回答。

import { getTheme } from 'office-ui-fabric-react';
import * as React from 'react';
import { Sidebar, ISidebar } from '@uifabric/experiments/lib/Sidebar';

const initSidebar = (sideBar: ISidebar) => {
  sideBar.toggleCollapsed();
};

export class SidebarCollapsibleExample extends React.Component {
  public render(): JSX.Element {
    this.state = {
      active: true
    };

    return (
      <Sidebar
        id={'sidebar-collapsed'}
        collapsible={true}
        theme={getTheme()}
        collapseButtonAriaLabel={'sitemap'}
        componentRef={initSidebar}

        items={[
          {
            key: 'collapsible-example-item1',
            name: 'Item 1',
            iconProps: { iconName: 'BuildQueue' },
            active: false
          }        ]}
      />
    );
  }
}

ToggleCollapsed 在导入的侧边栏 reactjs 组件上

ToggleCollapsed on imported sidebar reactjs component

reactjs

office-ui-fabric