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

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

Answer 2

在瓦迪姆的帮助下，我的答案。

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组件上

2 个答案: