Skip to Content
参考手册<ReactFlowProvider />

<ReactFlowProvider />

GitHub 上的源代码 

¥Source on GitHub 

<ReactFlowProvider /> 组件是一个 上下文提供程序 ，它使得可以在 <ReactFlow /> 组件之外访问流的内部状态。我们提供的许多钩子都依赖于此组件才能工作。

¥The <ReactFlowProvider /> component is a context provider  that makes it possible to access a flow’s internal state outside of the <ReactFlow /> component. Many of the hooks we provide rely on this component to work.

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>
  )
}

注释

¥Notes

  • 如果你正在使用路由并希望你的流状态在路由之间保持不变，则将 <ReactFlowProvider /> 组件放在路由之外至关重要。

    ¥If you’re using a router and want your flow’s state to persist across routes, it’s vital that you place the <ReactFlowProvider /> component outside of your router.

  • 如果同一页面上有多个流，则需要为每个流使用单独的 <ReactFlowProvider />。

    ¥If you have multiple flows on the same page you will need to use a separate <ReactFlowProvider /> for each flow.

<ReactFlow />组件