<ReactFlowProvider />

<ReactFlowProvider /> 元件是一個內容提供者，它可以讓您在 <ReactFlow /> 元件之外存取流程的內部狀態。我們提供的許多鉤子都依賴此元件才能運作。

import { ReactFlow,  ReactFlowProvider, useNodes } from '@xyflow/react'
 
export default function Flow() {
  return (
    <ReactFlowProvider>
      <ReactFlow nodes={...} edges={...} />
      <Sidebar />
    </ReactFlowProvider>
  )
}
 
function Sidebar() {
  // This hook will only work if the component it's used in is a child of a
  // <ReactFlowProvider />.
  const nodes = useNodes()
 
  return (
    <aside>
      {nodes.map((node) => (
        <div key={node.id}>
          Node {node.id} -
            x: {node.position.x.toFixed(2)},
            y: {node.position.y.toFixed(2)}
        </div>
      ))}
    </aside>
  )
}

注意事項

如果您正在使用路由器並希望您的流程狀態在路由之間保持持久，那麼將 <ReactFlowProvider /> 元件放置在路由器之外至關重要。
如果您在同一個頁面上有多個流程，則每個流程都需要使用單獨的 <ReactFlowProvider />。

<ReactFlow />元件