反应流和敢于：reactFlowInstance.fitView() 在单击第二个按钮后使实例适合屏幕。 （第一只改变图形的方向）
我尝试了不同的方法来实现这种美感，但似乎不起作用。我的问题是，当我点击按钮时，我想更改图表的布局，这种情况发生了，我对此感到很高兴，但我也希望我的图表在屏幕上居中（适合）。第一次单击按钮会更改方向，但不适合实例。为了适应该实例，我需要第二次按下按钮。我想这与异步JS有关还是？这是我的代码：
const onChangeTreeLayout = useCallback(
(treeLayoutDirection) => {
const layoutedElements = getLayoutedGraphElements(
elements,
treeLayoutDirection,
setTreeLayoutDirection
);
setElements(layoutedElements);
},
[elements]
);
然后我如何获取实例并触发它如下： 注意：我无法使用 useReactFlow() 挂钩，因为我们决定不迁移到较新的版本。但 useZoomPanHelper 无论如何都能完成它的工作。
const reactFlowInstance = useZoomPanHelper();
<button
onClick={() => {
onChangeTreeLayout('TB');
reactFlowInstance.fitView();
}}
>
Horizontal Layout
</button>
我也尝试将函数 .fitView() 放入 onChangeTreeLayout 但我得到了相同的行为。
I have tried different ways of implementing this beauty, but it doesn't seem to work. My problem is that when I hit the button, I want to change the layout of the graph, which happens and I am glad for it, but I also want my graph to be centered (fit) on the screen. The first button click changes the direction, but doesn't fit the instance. To fit the instance I need to hit the button for a second time. I guess it has to do with asynchronous JS or? This is my code:
const onChangeTreeLayout = useCallback(
(treeLayoutDirection) => {
const layoutedElements = getLayoutedGraphElements(
elements,
treeLayoutDirection,
setTreeLayoutDirection
);
setElements(layoutedElements);
},
[elements]
);
Then how I get the instance and trigger it follows: Note: I can't use useReactFlow() hook as we decided not to migrate to a newer version. But useZoomPanHelper does its work anyway.
const reactFlowInstance = useZoomPanHelper();
<button
onClick={() => {
onChangeTreeLayout('TB');
reactFlowInstance.fitView();
}}
>
Horizontal Layout
</button>
I have also tried putting the function .fitView() inside the onChangeTreeLayout but I get the same behaviour.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为调用 fitView() 并设置新元素会产生像设置状态并在同一函数中使用该状态变量一样的效果。
fitView() 应该在重新渲染新元素后调用。
您可以尝试 setTimeout(reactFlowInstance.fitView)
I think calling fitView() with setting new elements will affect just like setting a state and using that state variable in the same function.
fitView() should be called after rerendering the new elements.
You could try
setTimeout(reactFlowInstance.fitView)