external_render

rendert eine externe Komponente in das DOM

Example

import ReactDOM from 'react-dom';
import React from 'react';
 
gantt.config.columns = [
    {name:"text",       label:"Aufgabenname",  tree:true, width:"*"},
    {name:"start_date", label:"Startzeit", align: "center"},
    {name:"duration",   label:"Dauer",   align: "center"},
    { 
        name:"external", label:"Element 1", align: "center",
        onrender: (item, node) => {
            return <DemoButton
                    text="Bearbeiten 1"
                    onClick={() => alert("Element als React Komponente")}
                    />
        }
    }
];
 
gantt.config.external_render = { 
    // überprüft, ob das Element eine React-Komponente ist
    isElement: (element) => {
        return React.isValidElement(element);
    },
    // rendert das React-Element in das DOM
    renderElement: (element, container) => {
        ReactDOM.render(element, container);
    }
};

Das external_render ist ein Objekt mit den folgenden Eigenschaften:

• isElement (element): boolean - eine Funktion, die verwendet wird, um das bereitgestellte Element zu validieren. Verwendet das folgende Argument:
  • element - (any) - ein Objekt, das von der onrender Funktion zurückgegeben wird.
• renderElement (element, container): void - eine Funktion, die verwendet wird, um die nativen Methoden anzuwenden, um native Komponenten zu rendern. Verwendet die folgenden Argumente:
  • element - (any) - ein Objekt, das von der onrender Funktion zurückgegeben wird.
  • container - (HTMLElement) - ein DOM-Element, an das die native Komponente angehängt wird.

hinzugefügt in v7.1

Zurück nach oben