React Flow：EdgeLabelRenderer 内的 UseStore 调用导致挂钩错误

Question

描述

我正在为用 Python 创建的流行病建模框架开发前端，目前我正在努力向边缘添加自定义标签。

错误信息：

Error: Invalid hook call... 
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at useStore (index.mjs:30:1)
at EdgeLabelRenderer (EdgeLabelRenderer.js:9:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)

自定义边缘类型：

import React from 'react';
import {getBezierPath, BaseEdge, EdgeLabelRenderer} from 'reactflow';


const TransitionEdge = ({ id, data, ...props }) => {
    const [edgePath, labelX, labelY] = getBezierPath(props);
    return (
        <>
            <BaseEdge id={id} path={edgePath} />
            <EdgeLabelRenderer>
                <div
                    style={{
                        position: 'absolute',
                        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                        background: '#ffcc00',
                        padding: 10,
                        borderRadius: 5,
                        fontSize: 12,
                        fontWeight: 700,
                    }}
                    className="nodrag nopan"
                >
                    {data.param}
                </div>
            </EdgeLabelRenderer>
        </>
    );
};

export default TransitionEdge;

将其传递给ReactFlow（简化）

import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'react-flow-renderer';
import TransitionEdge from './edgeComponents/TransitionEdge';

    .
    .
    .

const edgeTypes = {
    transition: TransitionEdge,       
};

    .
    .
    .

    <ReactFlow
     nodes={nodes}
     edges={edges}
     onNodesChange={onNodesChange}
     onEdgesChange={onEdgesChange}
     onConnect={onConnect}
     onNodeClick={onNodeClick}
     edgeTypes={edgeTypes}                # Add edge types
                />

我确保react 和react-dom 没有任何不匹配的版本，正如React 文档所建议的那样。我也多次查看了反应流文档，但我无法注意到我的文档和提供的自定义边缘示例之间有任何区别。

文档的相关部分：

https://reactflow.dev/examples/edges/edge-label-renderer

Answer 1

我意识到 EdgeLabelRenderer 是新版本的一部分，这就是代码损坏的原因（它是从“reactflow”导入的，其余部分来自“react-flow-renderer”）。

更新也破坏了应用程序，节点和边缘无法正确渲染，但导入“reactflow/dist/styles.css”修复了这个问题。