API 参考
🌐 API Reference
此参考尝试记录 React Flow 导出的每个函数、钩子、组件和类型。如果你正在寻找指南和教程,请参阅我们的学习部分。
🌐 This reference attempts to document every function, hook, component, and type exported by React Flow. If you are looking for guides and tutorials, please refer to our learn section.
如何使用此参考
🌐 How to use this reference
我们认为文档应该回答两个广泛的问题:‘这是什么东西?’和‘我如何使用它?’
🌐 We think that documentation should answer two broad questions: “what is this thing?” and “how do I use it?”
为此,我们的 API 参考旨在简明地回答第一个问题,而学习部分则对第二个问题进行了更详细的说明。如果你在浏览参考资料时感到困惑,不知道这些东西到底是什么意思,也许我们有一个指南可以帮助你!
🌐 To that end, our API reference aims to concisely answer that first question and learn section goes into more detail on the second. If you find yourself clicking around the reference wondering what the heck any of this means, maybe we have a guide that can help you out!
自定义节点
A powerful feature of React Flow is the ability to add custom nodes. Within your custom nodes you can render everything you want. You can define multiple source and target handles and render form inputs or charts for example. In this guide we will implement a node with an input field that updates some text in another part of the application.
Read more布局
We regularly get asked how to handle layouting in React Flow. While we could build some basic layouting into React Flow, we believe that you know your app's requirements best and with so many options out there we think it's better you choose the best right tool for the job. In this guide we'll look at four layouting libraries and how to use them.
Read more长期用户须知
🌐 A note for our long-term users
如果你是从我们旧的 API 页面过来的,页面可能看起来会有些不同! 我们重新组织了文档,以便如果你知道自己在找什么,可以更轻松地查找。所有的类型、组件、钩子和工具函数现在都有自己的页面,帮助你准确找到所需内容。
🌐 If you’re coming here from our old API pages things might look a bit different! We’ve reorganized our documentation to make it easier to look things up if you know what you’re looking for. All our types, components, hooks, and util functions get their own page now to help you find exactly what you need.
如果你是 React Flow 新手,或者不确定该在哪里查找某些内容,请查看下面的部分。
🌐 If you’re new to React Flow or you’re not sure where to look for something, take a look at the section below.
JavaScript 用户须知
🌐 A note for JavaScript users
React Flow 是用 TypeScript 编写的,但我们知道并不是每个人都使用它。我们鼓励开发者使用最适合他们的技术,并且在我们的文档中,有 TypeScript 和 JavaScript 示例的混合。
🌐 React Flow is written in TypeScript, but we know that not everyone uses it. We encourage developers to use the technology that works best for them, and throughout our documentation there is a blend of TypeScript and JavaScript examples.
然而,对于我们的 API 参考,我们使用 TypeScript 的语法来记录 props 和函数的类型。这里有一个快速入门指南,教你如何阅读它:
🌐 For our API reference, however, we use TypeScript’s syntax to document the types of props and functions. Here’s a quick crash course on how to read it:
• ? 表示该字段或参数是可选的。
• 在类型定义中,<T>表示一个泛型类型参数。就像函数的参数,但用于类型!定义type Array<T> = ...意味着一个名为Array的类型,它接受一个泛型类型参数T。
• <T> 在提到某种类型时就像是在“填充”一个泛型类型参数。这就像是调用一个函数,但用于类型!类型 Array<number> 是类型 Array,其中泛型类型参数 T 被填充为类型 number。
• T | U 意味着该类型要么是 T 要么是 U:这通常被称为 联合类型。
• T & U 意味着该类型既是 T 又是 U:这通常被称为 交集。
TypeScript 的团队有他们自己的阅读类型的实用指南 ,你可能会觉得有用。如果你在某些地方仍然遇到问题,随时可以来我们的Discord 寻求帮助!
🌐 The TypeScript folks have their own handy guide for reading types that you might find useful. If you’re still stuck on something, feel free to drop by our Discord and ask for help!