#Vykreslení FlowModel

FlowModelRenderer je klíčová React komponenta pro vykreslování FlowModel. Jejím úkolem je převést instanci FlowModel na vizuální React komponentu.

#Základní použití

#FlowModelRenderer

import { FlowModelRenderer } from '@nocobase/flow-engine';

// Základní použití
<FlowModelRenderer model={myModel} />

#FieldModelRenderer

Pro řízené modely polí použijte k vykreslení FieldModelRenderer:

import { FieldModelRenderer } from '@nocobase/flow-engine';

// Vykreslování řízeného pole
<FieldModelRenderer model={fieldModel} />

#Props

#FlowModelRendererProps

#Detailní konfigurace showFlowSettings

Pokud je showFlowSettings objekt, jsou podporovány následující konfigurace:

showFlowSettings={{
  showBackground: true,    // Zobrazit pozadí
  showBorder: true,        // Zobrazit ohraničení
  showDragHandle: true,    // Zobrazit úchyt pro přetažení
  style: {},              // Vlastní styl panelu nástrojů
  toolbarPosition: 'inside' // Pozice panelu nástrojů: 'inside' | 'above' | 'below'
}}

#Životní cyklus vykreslování

Celý cyklus vykreslování volá následující metody v uvedeném pořadí:

1. model.dispatchEvent('beforeRender') – Událost před vykreslením
2. model.render() – Spustí metodu vykreslování modelu
3. model.onMount() – Hook pro připojení komponenty
4. model.onUnmount() – Hook pro odpojení komponenty

#Příklady použití

#Základní vykreslování

import { FlowModelRenderer } from '@nocobase/flow-engine';

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>Načítání...</div>}
    />
  );
}

#Vykreslování s nastavením pracovního postupu

// Zobrazit nastavení, ale skrýt tlačítko pro odebrání
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// Zobrazit nastavení a název
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// Použít režim kontextové nabídky
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

#Vlastní panel nástrojů

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'Vlastní akce',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('Vlastní akce');
      }
    }
  ]}
/>

#Přeskočení automatických pracovních postupů

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
  showErrorFallback={false}
/>

#Vykreslování modelu pole

import { FieldModelRenderer } from '@nocobase/flow-engine';

function FormField({ model, onChange, ...props }) {
  return (
    <FieldModelRenderer
      model={model}
      onChange={onChange}
      {...props}
    />
  );
}

#Zpracování chyb

FlowModelRenderer obsahuje komplexní vestavěný mechanismus pro zpracování chyb:

• Automatické hranice chyb: showErrorFallback={true} je ve výchozím nastavení povoleno
• Chyby automatických pracovních postupů: Zachytává a zpracovává chyby během provádění automatických pracovních postupů
• Chyby vykreslování: Zobrazí záložní obsah, pokud se vykreslování modelu nezdaří

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>Vykreslení se nezdařilo, zkuste to prosím znovu</div>}
/>

#Optimalizace výkonu

#Přeskočení automatických pracovních postupů

Ve scénářích, kde nejsou automatické pracovní postupy potřeba, je můžete přeskočit pro zlepšení výkonu:

<FlowModelRenderer
  model={myModel}
  skipApplyAutoFlows={true}
/>

#Reaktivní aktualizace

FlowModelRenderer využívá observer z @formily/reactive-react pro reaktivní aktualizace, což zajišťuje, že se komponenta automaticky znovu vykreslí při změně stavu modelu.

#Důležité poznámky

1. Validace modelu: Ujistěte se, že předaný model má platnou metodu render.
2. Správa životního cyklu: Hooky životního cyklu modelu budou volány ve vhodných okamžicích.
3. Hranice chyb: Doporučuje se povolit hranice chyb v produkčním prostředí pro zajištění lepší uživatelské zkušenosti.
4. Aspekty výkonu: Pro scénáře zahrnující vykreslování velkého počtu modelů zvažte použití možnosti skipApplyAutoFlows.