In a cra project, write the following code, there are two error points inside, and even if these two points are solved, nothing can be rendered in the web page window.
// EditorTester.jsx
import React, { useEffect } from 'react'
import VEditor from '@vesoft-inc/veditor'
export const EditorTester = () => {
let editorRef = React.useRef()
useEffect(() => {
const editor = new VEditor(editorRef.current)
let index = 0
console.log('editor', editor)
const add = () => {
// 如果改为 graph?. 则会报错 Uncaught TypeError: Cannot read properties of undefined (reading 'node')
editor.graph.node.addNode({
uuid: index,
type: 'default', // node shape type
name: 'test' + index++,
x: window.innerWidth * Math.random(),
y: 300 * Math.random(),
})
}
for (let x = 0; x < 50; x++) {
add()
}
// add line
for (let x = 0; x < 10; x++) {
editor.graph?.line.addLine({
from: Math.floor(50 * Math.random()),
to: Math.floor(50 * Math.random()),
fromPoint: 1,
toPoint: 0,
})
}
// 这行会报错 Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
console.log(editor.schema.getData())
}, [])
return <div ref={editorRef} id='ca'></div>
}