时间戳

首页 > 解决方案 > 如何从外部访问 React 组件中使用的第三方 DOM 库中的对象的属性

javascript - 如何从外部访问 React 组件中使用的第三方 DOM 库中的对象的属性

问题描述

我想在基于 React 的项目中使用 Vis.js。由于没有一个 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);

我阅读了 React Ref 并尝试了类似 () =>{ console.log(document.getElementsByClassName('vis-network'))回调的方法，ReactDOM.render()但这并没有帮助。

另一个问题是为什么没有设置 ref 而只是<div>.

因为我认为this.appRef = createRef();在组件的构造函数和ref={this.appRef}render() 中会导致一个 ref。

调试器截图

我希望你能给我一个提示。

标签： javascriptreactjsreact-dom

解决方案

实际上流程应该是相反的，定义组件外部的节点，然后将它们传入。为此，将构造函数定义为：

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

然后将其构造为：

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

请注意，您应该将任何有状态的东西放入this.state并使用setState它来改变它。

推荐阅读