#Rendera FlowModel

FlowModelRenderer är React-komponenten som utgör kärnan för att rendera en FlowModel. Den ansvarar för att omvandla en FlowModel-instans till en visuell React-komponent.

#Grundläggande användning

#FlowModelRenderer

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

// Grundläggande användning
<FlowModelRenderer model={myModel} />

#FieldModelRenderer

För kontrollerade fältmodeller använder ni FieldModelRenderer för att rendera:

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

// Rendering av kontrollerat fält
<FieldModelRenderer model={fieldModel} />

#Props-parametrar

#FlowModelRendererProps

#Detaljerad konfiguration för showFlowSettings

När showFlowSettings är ett objekt stöds följande konfigurationer:

showFlowSettings={{
  showBackground: true,    // Visa bakgrund
  showBorder: true,        // Visa kantlinje
  showDragHandle: true,    // Visa draghandtag
  style: {},              // Anpassad verktygsfältsstil
  toolbarPosition: 'inside' // Verktygsfältets position: 'inside' | 'above' | 'below'
}}

#Renderingslivscykel

Hela renderingscykeln anropar följande metoder i ordning:

1. model.dispatchEvent('beforeRender') - Händelse före rendering
2. model.render() - Utför modellens render-metod
3. model.onMount() - Komponentens monteringskrok
4. model.onUnmount() - Komponentens avmonteringskrok

#Användningsexempel

#Grundläggande rendering

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

function MyComponent() {
  const model = useFlowModel();
  
  return (
    <FlowModelRenderer 
      model={model}
      fallback={<div>Laddar...</div>}
    />
  );
}

#Rendering med arbetsflödesinställningar

// Visa inställningar men dölj knappen för att ta bort
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  hideRemoveInSettings={true}
/>

// Visa inställningar och titel
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  showTitle={true}
/>

// Använd högerklicksmenyläge
<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  flowSettingsVariant="contextMenu"
  hideRemoveInSettings={true}
/>

#Anpassat verktygsfält

<FlowModelRenderer
  model={myModel}
  showFlowSettings={true}
  extraToolbarItems={[
    {
      key: 'custom-action',
      title: 'Anpassad åtgärd',
      icon: 'SettingOutlined',
      onClick: () => {
        console.log('Anpassad åtgärd');
      }
    }
  ]}
/>

#Hoppa över automatiska arbetsflöden

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

#Rendering av fältmodell

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

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

#Felhantering

FlowModelRenderer har en omfattande inbyggd felhanteringsmekanism:

• Automatisk felgräns: showErrorFallback={true} är aktiverat som standard
• Fel i automatiska arbetsflöden: Fångar och hanterar fel under exekvering av automatiska arbetsflöden
• Renderingsfel: Visar reservinnehåll när modellrendering misslyckas

<FlowModelRenderer
  model={myModel}
  showErrorFallback={true}
  fallback={<div>Rendering misslyckades, försök igen</div>}
/>

#Prestandaoptimering

#Hoppa över automatiska arbetsflöden

För scenarier där automatiska arbetsflöden inte behövs kan ni hoppa över dem för att förbättra prestandan:

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

#Reaktiv uppdatering

FlowModelRenderer använder observer från @formily/reactive-react för reaktiva uppdateringar, vilket säkerställer att komponenten automatiskt renderas om när modellens tillstånd ändras.

#Att tänka på

1. Modellvalidering: Säkerställ att den model som skickas in har en giltig render-metod.
2. Livscykelhantering: Modellens livscykelkrokar anropas vid lämpliga tidpunkter.
3. Felgräns: Vi rekommenderar att ni aktiverar felgränsen i en produktionsmiljö för att ge en bättre användarupplevelse.
4. Prestandaöverväganden: För scenarier som involverar rendering av ett stort antal modeller, överväg att använda alternativet skipApplyAutoFlows.