Пользовательский интерфейс React Fabric удаляет основной элемент

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

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

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