在graphviz-react中反应流程图节点上的点击事件？答案

【问题标题】：React click events on flowchart nodes in graphviz-react?在graphviz-react中反应流程图节点上的点击事件？
【发布时间】：2022-07-31 01:23:56
【问题描述】：

我正在尝试几种不同的方法来在 React 中渲染流程图。到目前为止，我已经完成了 mermaid 和 react-flow 的工作，现在我正在开发 graphviz。

使用 mermaid，我可以将 click {nodeId} handleNodeClick 添加到每个节点以使其捕获节点点击，而使用 react-flow 我可以将 onNodeClick = {handleNodeClick} 添加到 ReactFlow 的道具以捕获节点点击。

但是，我在 graphviz-react 中找不到任何类似的功能。我可以使用 graphviz 属性为每个节点添加一个 URL，单击该节点时将打开该 URL (https://graphviz.org/docs/attrs/URL/)，但这是我能找到的唯一与单击相关的功能，我怀疑使用链接进行更新js 应用是错误的方式。

有什么建议吗？我猜该解决方案涉及为每个节点添加一个 onclick 属性作为一种后处理步骤，但我不知道如何在 React 中做到这一点。

【问题讨论】：

标签： reactjs graphviz

【解决方案1】：

想通了。我添加了一个 useEffect()，它可以有效地对元素进行后处理，以便在我想要的任何地方都添加 onclick 事件，如下所示：

  useEffect(() => {
    const graphElement = document.querySelector('div.flowchart');

    flowData.forEach((item) => {
        var e = graphElement.querySelector('#'+item.id);
        if(e) {
            e.onclick= function() { 
                SelectItemById(item.id); 
            };
        }
    });
  });

不利的一面是，这非常慢，我想知道是否有更好的方法来做到这一点...

【讨论】：