节点步骤的边缘未在 react-flow-renderer 中呈现

Question

我正在尝试将 data.js 文件中的步骤显示为节点并尝试连接这些边。但边缘只可见。在页面中。我用过 [react-flow-renderer] package1.

当我刷新页面时，边缘甚至一秒钟都看不到。

我的反应组件

import React, { Component } from 'react'
import data from '../data'
import ReactFlow, {addEdge} from 'react-flow-renderer'


export class Pro2 extends Component {
    constructor() {
        super()
        this.state = {
            steps:data.map((step, index) => ({ id: step.id, data: {label: step["step-name"] }, position: {x: 500, y:100 * (index + 1)}})),
            tasks:[],
            sedges: data.slice(0, data.length - 1).map((step, index) => ({id:"e"+step.id+data[index+1].id, source: step.id, target: data[index+1].id, animated: true}))
        }
        console.log(this.state.steps, this.state.sedges)
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(t) {
        //console.log("clicked...............clicked at id", t.id, typeof t.id)
        let sid = parseInt(t.id)
        console.log("data length", data.length)
        for(let i in data){
            const step = data[i]
            if(step.id == sid){
                let posX
                if(sid%2 == 0) posX = 200
                else posX = 800
                const tasknodes = step.tasks.map((task, index) => ({id: task.id, data: {label: task["name"]+"(weight: "+task.weight+")"}, position: {x:posX, y:100 * (index + sid)}}))
                this.setState(prevState => ({
                    tasks: tasknodes
                }))
            }
            else{
                // console.log("elseeeeeeeeeeeeeee")
            }
        }
        
    }

    render() {
        const graphStyles = { width: '100%', height: '500px' };
        const elements = this.state.steps.concat(this.state.sedges).concat(this.state.tasks)
        
  
        return (
            <div>
                  {/* {BasicGraph()} */}
                  <ReactFlow  onElementClick={this.handleChange} elements={elements} style={graphStyles} />
                  
            </div>
        )
    }
}

export default Pro2

这是我用过的json数据 data.js

const data = [
    {   
        "id": 1,
        "step-name": "The First Step",
        "tasks": [
            {
                "id": "11",
                "name": "task-11",
                "weight": 50
            },
            {
                "id": "12",
                "name": "task-12",
                "weight": 60
            }
        ]
    },
    {   
        "id": 2,
        "step-name": "The Midlle Step",
        "tasks": [
            {
                "id": "21",
                "name": "task21",
                "weight": 5
            },
            {
                "id": "22",
                "name": "task-22",
                "weight": 60
            }
        ]
    },
    {
        "id": 3,
        "step-name": "The Last Step",
        "tasks": [
            {
                "id": "31",
                "name": "task31",
                "weight": 45
            },
            {
                "id": "32",
                "name": "task-32",
                "weight": 16
            }
        ]
    }
]

export default data

Answer 1

正如文档中指出的，节点和边的 ID 必须是字符串。

节点步骤的边缘未在 react-flow-renderer 中呈现

edges to the node steps are not rendering in react-flow-renderer

javascript

reactjs

react-class-based-component