Почему края не отображаются в потоке реагирования?

Я новичок в React Flow. Моя цель — подключиться к узлам одного типа. Я хочу иметь один шаблон для узла и использовать его везде. Ниже простой пример, но края не отображаются.

Если я удалю тип узлов, все будет в порядке.

import { useCallback, useState } from "react";
import "reactflow/dist/style.css";
import TextUpdaterNode from "./TextUpdaterNode.js";
import "./text-updater-node.css";

const rfStyle = {
  backgroundColor: "#B8CEFF"
};

const initialNodes = [
  {
    id: "1",
    position: { x: 0, y: 0 },
    type: "textUpdater"
  },
  {
    id: "2",
    position: { x: 0, y: 100 },
    type: "textUpdater"
  }
];

const initialEdges = [{ id: "e1-2", source: "1", target: "2", animated: true }];

const nodeTypes = { textUpdater: TextUpdaterNode };

function Flow() {
  return (
    <ReactFlow
      nodes = {initialNodes}
      edges = {initialEdges}
      nodeTypes = {nodeTypes}
      fitView
      style = {rfStyle}
    />
  );
}

export default Flow;

🤔 А знаете ли вы, что...
React был первоначально выпущен в 2013 году.


1
89
2

Ответы:

Проблема с отсутствием краев может быть связана с тем, как определен или зарегистрирован компонент TextUpdaterNode.


Решено

Чтобы решить вашу проблему, вам необходимо убедиться, что TextUpdaterNode component реализован правильно, и зарегистрировать пользовательский тип узла в свойстве nodeTypes ReactFlow.

ТекстUpdaterNode:

import React from 'react';
import { Handle, Position } from 'reactflow';

const TextUpdaterNode = ({ data }) => {
  return (
    <div className = "text-updater-node">
      <Handle type = "target" position = {Position.Top} />
      <div>{data.label}</div>
      <Handle type = "source" position = {Position.Bottom} />
    </div>
  );
};

export default TextUpdaterNode;

Для потока.js:

import React from 'react';
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
import TextUpdaterNode from './TextUpdaterNode';
import './text-updater-node.css';

const rfStyle = {
  backgroundColor: '#B8CEFF',
};

const initialNodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    type: 'textUpdater',
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 0, y: 100 },
    type: 'textUpdater',
    data: { label: 'Node 2' },
  },
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2', animated: true },
];

const nodeTypes = { textUpdater: TextUpdaterNode };

function Flow() {
  return (
    <ReactFlow
      nodes = {initialNodes}
      edges = {initialEdges}
      nodeTypes = {nodeTypes}
      fitView
      style = {rfStyle}
    />
  );
}

export default Flow;

Вы также можете добавить следующий CSS:

.text-updater-node {
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 3px;
}