我在Nextjs Project中使用Balkan的家谱库。

Question

在页面中使用它时

page.tsx

文件

const FamilyTreeComponent = ({ nodes }: {nodes: any}) => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (nodes.length > 0 && chartRef.current) {
            FamilyTree.templates.base.defs = ``;

            FamilyTree.templates.main = Object.assign({}, FamilyTree.templates.base);
            FamilyTree.templates.main.defs = `<style></style>`;
            FamilyTree.templates.main.node = '';
            FamilyTree.templates.main.img_0 = ``;
            FamilyTree.templates.main_male = Object.assign({}, FamilyTree.templates.main);
            FamilyTree.templates.main_male.node = '';
            FamilyTree.templates.main_male.img_0 = ``;
            FamilyTree.templates.main_male_child = Object.assign({}, FamilyTree.templates.main_male);
            FamilyTree.templates.main_male_child.link = '';
            FamilyTree.templates.main_female = Object.assign({}, FamilyTree.templates.main_male);
            FamilyTree.templates.main_female.node = '';
            FamilyTree.templates.main_female.img_0 = ``;
            FamilyTree.templates.main_female_child = Object.assign({}, FamilyTree.templates.main_female);
            FamilyTree.templates.main_female_child.link = '';

            const family = new FamilyTree(chartRef.current, {
                scaleInitial: FamilyTree.match.boundary,
                template: "main",
                nodeTreeMenu: true,
                enableSearch: false,
                editUI: new EditForm(),             <- New form UI here
                nodeBinding: {
                    field_0: "first_name",
                    field_1: "full_name",
                    field_2: "birth_date",
                    field_3: "uid",
                    img_0: "avatar",
                },
                editForm: {
                    buttons: {
                        edit: null,
                        share: {
                            icon: FamilyTree.icon.share(24, 24, '#fff'),
                            text: 'Share'
                        },
                        pdf: {
                            icon: FamilyTree.icon.pdf(24, 24, '#fff'),
                            text: 'Save as PDF'
                        },
                        remove: {
                            icon: FamilyTree.icon.remove(24, 24, '#fff'),
                            text: 'Remove',
                            hideIfDetailsMode: true
                        }
                    }
                },
                tags: {
                    "main_female_child": {
                        template: "main_female_child"
                    },
                    "main_male_child": {
                        template: "main_male_child"
                    },
                },
                nodes,
            });
        }
    }, [nodes]);

    return <div ref={chartRef} style={{ height: "100%" }} />;
};

中

editUI: new EditForm(),

它给出了错误

TypeError: this.editUI.init is not a function

注意我正在使用

typescript

用于表格。此处的文档

https：//balkan.app/familytreejs/docs/edit

仅谈论JavaScript代码。我还尝试了给定的基于JavaScript函数的方法，但也给出了错误。 这是一个问题。谢谢您的报告。 现在已修复。请获取最新版本（1.09.45）