React Fabric UI 移除 Pivot 项

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

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

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 并将其作为道具传递。这将使您的组件更具可重用性，并且不会将其与您的业务逻辑绑定。

Answer 2

您可以根据自己的情况将所需的项目推送到数组中。希望对您有所帮助。

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