有没有一种方法可以创建多个cytoscape.Core属性？

Question

我想通过单击下拉菜单中的两个不同节点图的下拉菜单来创建更改布局和动画的功能。 cy = {（cy）=> {this.cy = cy}}可以为第一个图创建函数并下拉，但是我尝试了cy1 = {（cy）=> {this.cy = cy}}的变体或cy1 = {（cy1）=> {this.cy = cy1}}等...

////THESE ALL WORK
//Graph layout and animation functions
reset() {
    this.cy.reset();
}

circle() {
    var layout = this.cy.makeLayout({ name: 'circle', animate: true })
    layout.run();
}

grid() {
    var layout = this.cy.makeLayout({ name: 'grid', animate: true });
    layout.run();
}

dagre() {
    var layout = this.cy.makeLayout({ name: 'dagre', animate: true });
    layout.run();
}


createNodeGraph = () => {
    
    return (
        <CytoscapeComponent
            elements={global.oldElements}
            style={{
                width: '100%', height: '700px', 'background-color': '#e6f3ff',
            }}
            layout={{
                name: 'grid'
            }}
            stylesheet={[
                {
                    selector: 'Node',
                    style: {
                        'width': 70,
                        'height': 70,
                        'font-size': 12,
                        'font-weight': 'bold',
                        'background-color': '#66ccff',
                        'content': 'data(label)',
                        'color': '#0d0d0d',
                        'text-valign': 'center',
                        'text-halign': 'center'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 70,
                        'height': 70,
                        'font-size': 11,
                        //'font-weight': 'bold',
                        "curve-style": "bezier",
                        //"control-point-step-size": 40,
                        'target-arrow-shape': 'triangle',
                        'width': 1,
                        'line-color': '#0d0d0d',
                        'target-arrow-color': '#0d0d0d'
                    }
                }
            ]}
            cy={(cy) => { this.cy = cy }}
        />
    )
    this.state.toggleGraph = false;
}

   }

///THESE ALL GIVE ERRORS
//Graph layout2 and animation functions
reset1() {
    this.cy1.reset();
}

circle1() {
    var layout = this.createNodeGraph.cy.makeLayout({ name: 'circle', animate: true })
    layout.run();
}

grid1() {
    var layout = this.cy1.makeLayout({ name: 'grid', animate: true });
    layout.run();
}

dagre1() {
    var layout = this.cy1.makeLayout({ name: 'dagre', animate: true });
    layout.run();
}

createNodeGraph1 = () => {
    
    return (
        <CytoscapeComponent
            elements={global.oldElements}
            style={{
                width: '100%', height: '700px', 'background-color': '#e6f3ff',
            }}
            layout={{
                name: 'grid'
            }}
            stylesheet={[
                {
                    selector: 'Node',
                    style: {
                        'width': 70,
                        'height': 70,
                        'font-size': 12,
                        'font-weight': 'bold',
                        'background-color': '#66ccff',
                        'content': 'data(label)',
                        'color': '#0d0d0d',
                        'text-valign': 'center',
                        'text-halign': 'center'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 70,
                        'height': 70,
                        'font-size': 11,
                        //'font-weight': 'bold',
                        "curve-style": "bezier",
                        //"control-point-step-size": 40,
                        'target-arrow-shape': 'triangle',
                        'width': 1,
                        'line-color': '#0d0d0d',
                        'target-arrow-color': '#0d0d0d'
                    }
                }
            ]}
            cy1={(cy) => { this.cy = cy }}
        />
    )
    this.state.toggleGraph = false;
}

///我收到的错误 TypeError：无法读取未定义的属性“ makeLayout” ThreadBuilder.circle1 C：/Users/jgibb/Source/Repos/MUSE/graphql-muse-frontend/src/views/ThreadBuilder.js：182 179 | } 180 | 181 | circle1（）{

182 | var layout = this.cy1.makeLayout（{name：'circle'，animate：true}） | ^ 183 | layout.run（）;