自定义节点组件调用graph

[BrickerZou]

Describe the bug

我通过props传递graph到自定义节点组件，进行一些graph的方法，但这似乎不是正确的做法

当我打印出ToJson()时，其props中的graph无限递归。

Your Example Website or App

https://codesandbox.io/s/restless-cdn-21ulm3?file=/src/MyComponent.ts

Steps to Reproduce the Bug or Issue

yarn start

Expected behavior

如何才是正确的做法，自定义节点组件中调用graph的一些方法？

Screenshots or Videos

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[xiazhaohui]

Demo好像有点问题

[BrickerZou]

Demo好像有点问题

https://codesandbox.io/s/restless-cdn-21ulm3?file=/src/MyCompoment.tsx

[BrickerZou]

接上面的截图一样的问题

无限递归

[xiazhaohui]

我也遇到此类似问题，toJSON之后，使用JSON.stringify()序列化，报错爆栈。检查之后发现也是递归循环导致的

[BrickerZou]

我也遇到此类似问题，toJSON之后，使用JSON.stringify()序列化，报错爆栈。检查之后发现也是递归循环导致的

和你一样的问题，不知道哪出bug了

[xiazhaohui]

循环引用了

[BrickerZou]

没找到在哪

[BrickerZou]

你是怎么解决的

[xiazhaohui]

这个Graph对象的数据结构，貌似就是这样嵌套的

[xiazhaohui]

你是怎么解决的

目前只是异常捕获，还没做处理，还没定位到具体哪里

[BrickerZou]

好兄弟，解决了后指点指点。

[xiazhaohui]

好兄弟，解决了后指点指点。

同是天涯沦落人，同指点。
感觉关键还是多理解一下API，看透了应该就知道问题出在哪里

[tonywu6]

Hello! React 组件配合 toJSON() 使用需要注意的事情以及一些解决方法，在文档的这里有提到：

大概的建议做法是将 React 组件函数/类事先注册到全局 Graph 下，然后在 addNode 时使用字符串形式引用注册好的组件（具体见文档）

// 使用 Graph.registerNode(...) 方法将 React 组件注册到系统中。

Graph.registerNode('my-node', {
  inherit: 'react-shape',
  x: 200,
  y: 150,
  width: 150,
  height: 100,
  component: <MyComponent />
})

// 然后将节点的 shape 属性指定为注册的节点名称

graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  shape: 'my-node',
})

---

技术细节

具体来讲，发生堆栈溢出的原因在于 1) Graph 被作为 props 传给了 React 元素 + 2) Graph.toJSON() 输出的内容包含 React 元素 + 3) toJSON() 方法在 native JavaScript 中有特殊语义：

1. 如 @SillyBoyXZH 提到的，React element 和 Graph 存在循环引用，这是因为 React element 会将 Graph 作为 props, 但是 Graph 又需要将这个 element 保存在内部的 model 里；
2. 在 native JavaScript 中，JSON.stringify() 对任何 object 带有的 toJSON() 作特殊处理：如果一个 object 带有 toJSON(), 那么 JSON.stringify 使用这个方法返回的值进行序列化

当我们进行 JSON.stringify(graph.toJSON()) 时：

stringify 对序列化的数据做递归处理
→ stringify 遇到自定义的 React 元素
→ 对 React 元素做递归处理
→ stringify 遇到 graph 对象（在 props 里）
→ stringify 调用 graph.toJSON()
→ stringify 对序列化的数据做递归处理
→ （...循环）

如果我们采用「事先注册元素」的方法，那么 React 元素就不会在 graph 内部保存（只是保存了它的名字），那么就不会出现这样的循环调用（当然，如果存在其它的循环引用，还是会出现堆栈溢出的）.

[xiazhaohui]

下周我试试。
之前写的时候也注意到这点了，要注册一下组件再使， 但是当时有侥幸心理，感觉不注册也能正常使用且没有任何报错等信息。

@tonywu6 如君所言，我再试试，兄弟你也试试 @BrickerZou ，有任何情况我来同步

[BrickerZou]

下周我试试。 之前写的时候也注意到这点了，要注册一下组件再使， 但是当时有侥幸心理，感觉不注册也能正常使用且没有任何报错等信息。

@tonywu6 如君所言，我再试试，兄弟你也试试 @BrickerZou ，有任何情况我来同步

试了下，似乎没变化

[BrickerZou]

不过我找到了原因，就是因为graph 被作为 props 传给了 React 元素

删去就没这个错误了。
但是如果不用prop传graph 那么我该如何调用graph的方法。

[xiazhaohui]

so 注册之后还是使用toJSON()导出数据是吧

[BrickerZou]

是的

[xiazhaohui]

我是用第二个注册到系统的方法，试了下，也不行，还是有那种报错
@tonywu6

Graph.registerReactComponent('custom-trigger-cell', <TouchConditionGraphDom/>)
Graph.registerReactComponent('custom-judge-cell', <JudgeConditionGraphDom/>)
Graph.registerReactComponent('custom-execute-cell', <ExecuteActionGraphDom/>)

how about you? @BrickerZou

[NewByVector]

@BrickerZou 不推荐在 react 组件内部再使用 graph，如果实在有必要的话，可以这样：

const graph = node.model.graph;

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.