मैं एक प्रतिक्रिया आधारित परियोजना में Vis.js का उपयोग करना चाहता हूँ। चूंकि कोई भी विज़ नेटवर्क कार्यान्वयन मेरे लिए काम नहीं करता है, इसलिए मुझे सादे पुस्तकालय का उपयोग करना होगा।

यह मेरा परीक्षण प्रतिक्रिया घटक है

import { DataSet, Network } from 'vis';
import React, { Component, createRef } from "react";

class VisNetwork extends Component {

    constructor() {
        super();

        this.network = {};
        this.appRef = createRef();
        this.nodes = new DataSet([
            { id: 1, label: 'Node 1' },
            { id: 2, label: 'Node 2' },
            { id: 3, label: 'Node 3' },
            { id: 4, label: 'Node 4' },
            { id: 5, label: 'Node 5' }
        ]);
        this.edges = new DataSet([
            { from: 1, to: 3 },
            { from: 1, to: 2 },
            { from: 2, to: 4 },
            { from: 2, to: 5 }
        ]);
        this.data = {
            nodes: this.nodes,
            edges: this.edges
        };
        this.options ={};
    }

    componentDidMount() {
        this.network = new Network(this.appRef.current, this.data, this.options);
    }

    render() {
        return (
            <div ref={this.appRef} />
        );
    }
}

export default VisNetwork;

यह अब तक माउंट किया गया एकमात्र घटक है

ReactDOM.render(<VisNetwork />,document.getElementById('mynetwork'));

मेरा सवाल यह है कि मैं नेटवर्क के गुणों तक कैसे पहुंच सकता हूं, उदाहरण के लिए, नोड प्राप्त करने या हटाने के लिए।

node = nodes.get(nodeId);

मैंने रिएक्ट रेफरी के बारे में पढ़ा और कुछ ऐसा करने की कोशिश की () =>{ console.log(document.getElementsByClassName('vis-network')) के कॉलबैक के रूप में ReactDOM.render()लेकिन यह मदद नहीं करता है।

एक और सवाल यह है कि रेफरी सेट क्यों नहीं है और यह सिर्फ <div> है।

क्योंकि मैंने सोचा था कि घटक के निर्माता में this.appRef = createRef(); और रेंडर () में ref={this.appRef} एक रेफरी की ओर ले जाएगा।

Screenshot of debugger

मुझे आशा है कि आप मुझे एक संकेत दे सकते हैं।

0
andreask 21 अक्टूबर 2018, 22:45

1 उत्तर

सबसे बढ़िया उत्तर

असल में प्रवाह दूसरी तरफ होना चाहिए, घटक के बाहर नोड्स को परिभाषित करें, फिर उन्हें पास करें। इसके लिए कन्स्ट्रक्टर को इस प्रकार परिभाषित करें:

 constructor(props) {
    super(props);
    this.nodes = props.nodes;
    //...
}

फिर इसे इस प्रकार बनाएं:

 const nodes = new DataSet([/*...*/]);
 ReactDOM.render(<VisNetwork nodes={nodes} />,document.getElementById('mynetwork'));

ध्यान दें कि आपको this.state में कुछ भी स्टेटफुल रखना चाहिए और इसे म्यूट करने के लिए setState का उपयोग करना चाहिए।

1
Jonas Wilms 21 अक्टूबर 2018, 20:00