如何在React组件中添加Rete.js可视化编程编辑器

Question

我正在尝试将Rete.js包含在react中，我尝试了文档中所说的内容，但得到了以下错误：

TypeError: Cannot read property 'style' of null
new EditorView
src/view/index.ts:25
  22 | this.container = container;
  23 | this.components = components;
  24 | 
> 25 | this.container.style.overflow = 'hidden';

下面是我的代码片段

​

import React from 'react';

import Rete from "rete";
import ConnectionPlugin from 'rete-connection-plugin';
import ReactRenderPlugin from 'rete-react-render-plugin';


const numSocket = new Rete.Socket('Number value');

class NumComponent extends Rete.Component {
  constructor() {
    super('Number');
  }

  builder(node) {
    let out = new Rete.Output('num', 'Number', numSocket);

    node.addOutput(out);
  }

  worker(node, inputs, outputs) {
    outputs['num'] = node.data.num;
  }
}

const container = document.querySelector('#rete');
const editor = new Rete.NodeEditor('demo@0.1.0', container);

editor.use(ConnectionPlugin)
editor.use(ReactRenderPlugin)

const numComponent = new NumComponent();
editor.register(numComponent);

const engine = new Rete.Engine('demo@0.1.0');
engine.register(numComponent);

editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
    await engine.abort();
    await engine.process(editor.toJSON());
});


const Dashboard = () => {

  return (
    
    <div id="rete"></div>

  );
};

export default Dashboard;

​

请帮我解决这个问题，我已经尝试了很长一段时间了。如果有人能帮上忙那就太好了。

Answer 1

你这么做太早了，你还没有渲染容器。将构造放入useEffect / componentDidUpdate中。