ToggleCollapsed на импортированном компоненте responsejs боковой панели

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

С помощью Вадима мой ответ.

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
          }        ]}
      />
    );
  }
}

Answer 2

Открытые методы (например, toggleCollapsed) компонента Sidebar доступны через componentRef, например:

<Sidebar componentRef={initSidebar} />

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

Пример

Исходное свернутое состояние может быть установлено так:

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
        }
      ]}
    />
  );
};