Question

我在Office Fabric UI中使用Pivot组件，需要删除一些视图的PivotItem。有什么办法吗？

等我需要在下面使用isComposeMode（）删除“插入”数据透视

import * as React from "react";
import { Label } from "office-ui-fabric-react/lib/Label";
import { Pivot, PivotItem } from "office-ui-fabric-react/lib/Pivot";
import InsertView from "./InsertView";

export interface PivotProps {}

export interface PivotState {}

class MainNav extends React.Component<PivotProps, PivotState> {
  render() {
    return (
      <div>
        <Pivot>
          <PivotItem headerText="Insert">
            <InsertView />
          </PivotItem>
          <PivotItem headerText="Review">
            <Label>Review</Label>
          </PivotItem>
          <PivotItem headerText="Settings">
            <Label>Settings</Label>
          </PivotItem>
        </Pivot>
      </div>
    );
  }

  isComposeMode = (): boolean => {
    if (Office.context.mailbox.item.displayReplyForm != undefined) {
      return false;
    } else {
      return true;
    }
  };
}

export default MainNav;

Answer 1

您可以根据自己的条件将所需项目推入数组。希望对您有所帮助。

render(){ 
  let pivotItems=[
    <PivotItem headerText="Insert">
            <InsertView />
    </PivotItem>,
    <PivotItem headerText="Review">
            <Label>Review</Label>
    </PivotItem>,
];

if(addLastPivot){
   pivotItems.push( 
      <PivotItem headerText="Settings">
            <Label>Settings</Label>
      </PivotItem>
   );
}

return (
      <div>
        <Pivot>
          {pivotItems}
        </Pivot>
      </div>
    );
  }

Answer 2

上面的数组方法很棒，但是您可以有条件地在数组中包含项目，然后使用.filter(Boolean)方法过滤掉“虚假”值。这样，仅当条件为true时，您才可以包括该项目。

import * as React from 'react'
import { Pivot, PivotItem, InsertView, Label } from '.'

export interface PivotProps {
    isComposeMode: boolean
}

class MainNav extends React.Component<PivotProps> {
    public render() {
        const items = [
            this.props.isComposeMode && <PivotItem key="insert" headerText="Insert"><InsertView /></PivotItem>,
            <PivotItem key="review"headerText="Review"><Label>Review</Label></PivotItem>,
            <PivotItem key="settings" headerText="Settings"><Label>Settings</Label></PivotItem>
        ].filter(Boolean)

        return (
            <Pivot>
                {items}
            </Pivot>
        )
    }
}

您还应该在父组件中派生isComposeMode并将其作为道具传递。这将使您的组件更具可重用性，并且不会将其与您的业务逻辑联系在一起。

React Fabric UI删除数据透视项

2 个答案: