如何在不使用道具的情况下创建反应布局组件？

Question

我在原始组件（如Radix UI ）中经常看到以下模式，其中布局呈现为自定义子组件。 例如，而不是这个：

<List
    title="Hello!"
    items={
        ['Item 1', 'Item 2', 'Item 3']
    }
/>

原语将使用这个：

<List.Root>
    <List.Title>Hello!</List.Title>
    <List.Items>
        <List.Item>Item 1</List.Item>
        <List.Item>Item 2</List.Item>
        <List.Item>Item 3</List.Item>
    <List.Items>
<List.Root>

这将最终渲染一些带有 styles 等的自定义布局，如下所示：

<div>
    <span>Hello!</span>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

我的问题是：这个模式的名称是什么，我将如何使用功能组件来实现它？ 我将如何在每个元素之间传递状态？ 我查看了一些 Radix 组件的源代码，但它们都使用某种抽象原语和大量Contexts 。

上面的例子非常简单，但你可以想象它被用于更复杂的布局。 例如，一个返回两列的布局，而不是传递column1和column2 ，您只需传递<Layout.First>...</Layout.First>和<Layout.Second>...</Layout.Second> .

任何帮助，将不胜感激！

Answer 1

看起来这种模式被称为复合组件。 关键是利用反应的Context API。

这是一个非常好的教程，更深入地介绍了如何实际创建复合组件： https://blog.cristiana.tech/building-compound-components-using-react-context-api-and-typescript