Я новичок в 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 году.
Проблема с отсутствием краев может быть связана с тем, как определен или зарегистрирован компонент 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;
}