标签: react-flow

这是我第一次介绍反应流。我希望创建一个自定义节点，创建后，用户可以在节点中输入信息并保存/显示它。从自定义节点上的反应流文档中，他们有一个类似的示例，其中创建了用户输入的TextUpdaterNode节点。console.logs

我不是通过控制台记录它，而是寻找一种将信息保存到节点本身并将其显示在节点上的方法。例如，如果用户要在输入中输入“24，男性”并按“回车”键，我希望使用该信息更新节点。

我可以采取哪些方法来做到这一点？

我使用 React-Flow 来可视化 React 中组件的树形层次结构。每当您在 React-Flow 中创建自定义节点时，您都​​会在树中使用它，如下所示：

  <ReactFlow
      onLoad={onLoadTree}
      elements={nodesAndEdges}
      nodeTypes={{ reactComponent: ComponentNode }}

这使得无法传递道具。假设我想传递一些东西，那么如果语法类似于 ，我就可以做到这一点reactComponent: <ComponentNode myProps={myProps} />。有没有人以前使用过这项技术并且知道是否可以通过某种方式将道具传递给自定义节点？：） 谢谢！

我在我的项目中使用react-flow-renderer。我们有一个要求，我们想通过单击该元素来删除该元素。

我尝试过以下代码。

const onElementsRemove = (elementsToRemove) =>
setElements((els) => removeElements(elementsToRemove, els));

我也把这个

但我们不希望这样。

任何人都可以知道如何做到这一点，这将是一个很大的帮助

我试图将 data.js 文件中的步骤显示为节点，并尝试连接这些边。但边缘仅可见。在页面中。我使用了 [react-flow-renderer] 包1。

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

我的反应组件

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 …