React Fabric UI удаляет элемент Pivot - PullRequest
Новая
       26

React Fabric UI удаляет элемент Pivot

0 голосов
/ 29 мая 2019

Я использую компонент Pivot в Office Fabric UI, мне нужно удалить PivotItem для некоторых представлений. Есть ли возможный способ?

и т.д.. Мне нужно удалить Pivot «Вставить» с помощью 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;

Ответы [ 2 ]

1 голос
/ 29 мая 2019

Подход к массиву выше, но вы можете условно включить элементы в массив, а затем отфильтровать «ложные» значения, используя метод .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 в родительском компоненте и передать его в качестве реквизита. Это сделает ваш компонент более пригодным для повторного использования и не будет привязывать его к вашей бизнес-логике.

1 голос
/ 29 мая 2019

Вы можете поместить необходимые элементы в массив в зависимости от вашего состояния.Надеюсь, это поможет вам. 

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