Как получить доступ к свойствам объектов из сторонней библиотеки DOM, используемой в компоненте React извне - PullRequest
Новая
       42

Как получить доступ к свойствам объектов из сторонней библиотеки DOM, используемой в компоненте React извне

0 голосов
/ 21 октября 2018

Я хочу использовать Vis.js в проекте на основе React.Поскольку ни одна из реализаций Vis Network не работает для меня, я должен использовать простую библиотеку.

Это мой тестовый компонент React 

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);

IПрочитайте о React Ref и попытайтесь использовать что-то вроде () =>{ console.log(document.getElementsByClassName('vis-network')) в качестве обратного вызова ReactDOM.render(), но это не поможет.

Другой вопрос, почему не установлен ref и он просто <div>.

Потому что я думал, что this.appRef = createRef(); в конструкторе компонента и ref={this.appRef} в render () приведут к ссылке.

Screenshot of debugger

Я надеюсь, что вы можете дать мне подсказку.

1 Ответ

0 голосов
/ 21 октября 2018

На самом деле поток должен быть наоборот, определить узлы вне компонента, а затем передать их внутрь. Для этого определите конструктор как: 

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

Затем создайте его как: 

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

Обратите внимание, что вы должны поместить что-либо с состоянием в this.state и использовать setState для его изменения.

...