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

【问题标题】：How to create a react layout component without using props?如何在不使用道具的情况下创建反应布局组件？
【发布时间】：2023-01-30 09:41:20
【问题描述】：

我在原始组件（如 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>

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

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

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

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

任何帮助，将不胜感激！

【问题讨论】：

标签： javascript reactjs typescript layout react-functional-component

【解决方案1】：

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

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

【讨论】：