如何无需Props创建React布局组件？解析该模式及状态传递方案

一、模式名称 #

你提到的这种布局实现模式叫做复合组件（Compound Components），核心是将完整UI拆分为多个关联子组件，通过嵌套组合使用，而非Props传递内容或配置。这种模式模仿HTML原生组件的嵌套逻辑（比如<select>与<option>、<form>与<input>），让组件API更直观，贴合开发者的书写习惯。

二、React函数组件实现步骤 #

以你提到的List组件为例，实现流程如下：

1. 创建Context作为通信桥梁 #

先定义Context，用于Root与子组件间的状态传递：

import { createContext, useContext, useState } from 'react';

const ListContext = createContext(null);

2. 实现Root容器组件 #

Root负责管理全局状态，并通过Context.Provider将状态注入上下文：

const ListRoot = ({ children }) => {
  // 示例：管理列表展开/收起状态
  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <ListContext.Provider value={{ isExpanded, setIsExpanded }}>
      <div style={{ border: '1px solid #eee', padding: '1rem', borderRadius: '4px' }}>
        {children}
      </div>
    </ListContext.Provider>
  );
};

3. 实现子组件 #

子组件通过useContext消费Root传递的状态，完成各自渲染逻辑：

// 标题组件：控制展开/收起
const ListTitle = ({ children }) => {
  const { isExpanded, setIsExpanded } = useContext(ListContext);

  return (
    <h3 
      style={{ margin: 0, cursor: 'pointer', display: 'flex', justifyContent: 'space-between' }}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {children}
      <span>{isExpanded ? '▼' : '▶'}</span>
    </h3>
  );
};

// 列表容器：根据状态决定是否渲染
const ListItems = ({ children }) => {
  const { isExpanded } = useContext(ListContext);

  if (!isExpanded) return null;

  return (
    <ul style={{ margin: '0.5rem 0 0 0', paddingLeft: '1.5rem' }}>
      {children}
    </ul>
  );
};

// 列表项组件：渲染内容
const ListItem = ({ children }) => {
  return (
    <li style={{ padding: '0.25rem 0' }}>
      {children}
    </li>
  );
};

4. 组合成复合组件 #

将子组件挂载到Root的属性上，形成统一命名空间：

const List = {
  Root: ListRoot,
  Title: ListTitle,
  Items: ListItems,
  Item: ListItem
};

export default List;

5. 使用方式 #

最终调用完全符合嵌套写法：

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

三、组件间的状态传递 #

复合组件的状态传递核心依赖React Context：

• Root作为Provider，将需要共享的状态（如展开状态、布局配置）和修改方法注入上下文；
• 所有嵌套子组件通过useContext获取上下文，实现状态共享与交互；
• 复杂场景下可创建多个Context，分层传递不同维度的状态（如样式配置、交互状态）。

Radix UI中大量使用Context正是基于此原理，同时它会做额外抽象：比如封装Context工具类、处理无障碍属性（ARIA标签）传递、统一管理样式主题等。

四、复杂布局实例：双列布局组件 #

用同样模式实现双列布局，替代传统Props传递：

1. 实现Layout复合组件 #

import { createContext, useContext } from 'react';

const LayoutContext = createContext({ columnRatio: [1, 1] });

const LayoutRoot = ({ children, columnRatio = [1, 1] }) => {
  return (
    <LayoutContext.Provider value={{ columnRatio }}>
      <div style={{ display: 'flex', gap: '1.5rem', padding: '1rem' }}>
        {children}
      </div>
    </LayoutContext.Provider>
  );
};

const LayoutFirst = ({ children }) => {
  const { columnRatio } = useContext(LayoutContext);
  const total = columnRatio[0] + columnRatio[1];
  const flexRatio = columnRatio[0] / total;

  return (
    <div style={{ flex: flexRatio, padding: '1rem', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
      {children}
    </div>
  );
};

const LayoutSecond = ({ children }) => {
  const { columnRatio } = useContext(LayoutContext);
  const total = columnRatio[0] + columnRatio[1];
  const flexRatio = columnRatio[1] / total;

  return (
    <div style={{ flex: flexRatio, padding: '1rem', backgroundColor: '#e8f4f8', borderRadius: '4px' }}>
      {children}
    </div>
  );
};

const Layout = {
  Root: LayoutRoot,
  First: LayoutFirst,
  Second: LayoutSecond
};

export default Layout;

2. 使用方式 #

<Layout.Root columnRatio={[2, 1]}>
  <Layout.First>
    <h4>左侧主内容区</h4>
    <p>占总宽度的2/3，适合放置主要内容</p>
  </Layout.First>
  <Layout.Second>
    <h4>右侧侧边栏</h4>
    <p>占总宽度的1/3，适合放置辅助信息</p>
  </Layout.Second>
</Layout.Root>

内容的提问来源于stack exchange，提问作者Eliot Hertenstein