我想添加一个具有React Flow Renderer中边缘的动态节点。我能够添加一个动态节点,但默认情况下无法连接边缘

发布于 2025-02-01 16:20:49 字数 1319 浏览 4 评论 0原文

我能够添加一个动态节点,但默认情况下无法连接边缘。如果添加一个新节点,我需要提供源和目标,如何提供动态节点的源和目标?

const initialNodes = [
    {
      id: 'a',
      data: { label: 'Start' },
      position: { x: 250, y: 25 },
      style: { borderRadius: '50%', padding: '10px', color: 'white', backgroundColor: '#6ede87' }
    },
    {
      id: 'z',
      data: { label: 'End' },
      position: { x: 250, y: 700 },
      style: { borderRadius: '50%', padding: '14px', color: 'white', backgroundColor: 'red' }
    },


  ];
const initialEdges = [
    { id: 'e1-2', source: edgeID, target: ++edgeID },

  ]
 const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

//adding a new node :
    const newNode = {
      
       type:'selectorNode2',
       id,
      position: {
        x: Math.random() * 500,
        y: Math.random() * 500,
       },
       data: {
         label: `${nameofNode}`,
      },
      style: {
         background: typeofNode === 1 ? '#ff6700' : typeofNode === 2 ? '#ff0072' : typeofNode === 3 ? '#668de3' : '#fffff',
         color: '#ffff',
         border: '1px solid #222138',
         width: 180,
         borderRadius: typeofNode === 2 ? '50px' : '0px',
        

       },
      };

“在此处输入图像说明”

I am able to add a dynamic node but I am unable to connect the edge by default. If I add a new node I need to provide source and target, how do I provide source and target of a dynamic node?

const initialNodes = [
    {
      id: 'a',
      data: { label: 'Start' },
      position: { x: 250, y: 25 },
      style: { borderRadius: '50%', padding: '10px', color: 'white', backgroundColor: '#6ede87' }
    },
    {
      id: 'z',
      data: { label: 'End' },
      position: { x: 250, y: 700 },
      style: { borderRadius: '50%', padding: '14px', color: 'white', backgroundColor: 'red' }
    },


  ];
const initialEdges = [
    { id: 'e1-2', source: edgeID, target: ++edgeID },

  ]
 const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

//adding a new node :
    const newNode = {
      
       type:'selectorNode2',
       id,
      position: {
        x: Math.random() * 500,
        y: Math.random() * 500,
       },
       data: {
         label: `${nameofNode}`,
      },
      style: {
         background: typeofNode === 1 ? '#ff6700' : typeofNode === 2 ? '#ff0072' : typeofNode === 3 ? '#668de3' : '#fffff',
         color: '#ffff',
         border: '1px solid #222138',
         width: 180,
         borderRadius: typeofNode === 2 ? '50px' : '0px',
        

       },
      };

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文