在React组件的两个标记之间使用函数是什么？

Question

例如，在@headless-ui/react库中，Listbox.Option可以通过以下方式传递其内部道具的值：

<Listbox.Option>
    {({ selected }) => (/* some component here */)}
</Listbox.Option>

这叫什么，如何编写实现类似功能的代码？

Answer 1

这叫渲染支柱。

通过使用children组件作为函数，您可以轻松地制作自己的呈现道具。

function MyComponent({ children }) {
  // ...
  return <div>{children(...)}</div>
}

<MyComponent>
  {(...) => ...}
</MyComponent>

Answer 2

这个模式的命名非常具有描述性：儿童功能组件。这是渲染道具的变体。

编写以这种方式工作的组件可以简单到字面上调用传入的children道具(例如children())，但建议至少运行React.Children.only(children)()以确保children不是数组。

这里的React.Children.only文档，供参考。