React子组件Dropdown的状态共享与展开功能实现求助

我要实现一个带标题的可展开区域，点击标题能切换区域的显示/隐藏。之前用普通组件实现过，但现在用子组件模式（Dropdown.Title、Dropdown.Body）时，在状态管理上犯了难——不知道该在主Dropdown组件里直接把状态传给子组件，还是用Context来共享状态？之前看过相关文章，但里面没讲清楚函数传递的内容。

现有代码如下：

App.js #

const App = () => (
  <div>
    <Dropdown>
      <Dropdown.Title>Dropdown One</Dropdown.Title>
      <Dropdown.Body>Some content in the body</Dropdown.Body>
    </Dropdown>
  </div>
);

useExpandDropdown.js（自定义Hook） #

const useExpandDropdown = (initialState = false) => {
  const [isExpanded, setIsExpanded] = useState(initialState);

  const toggleExpand = () => setIsExpanded((prev) => !prev);

  return [isExpanded, toggleExpand];
};

export default useExpandDropdown;

Dropdown.js（主组件） #

import useExpandDropdown from "../Hooks/useExpandDropdown";
import DropdownBody from "./DropdownBody";
import DropdownTitle from "./DropdownTitle";

const Dropdown = ({ children }) => {
  const [isExpanded, toggleExpand] = useExpandDropdown();
  return <div>{children}</div>;
};

Dropdown.Title = DropdownTitle;
Dropdown.Body = DropdownBody;

export default Dropdown;

DropdownTitle.js（标题组件） #

const DropdownTitle = ({ children }) => {
  // 我想在此处访问toggleExpand函数
  return <div>{children}</div>;
}

export default DropdownTitle;

DropdownBody.js（内容组件） #

const DropdownBody = ({ isExpanded, children }) => {
  // 我想在此处访问isExpanded状态
  return <div>{children}</div>;
}

export default DropdownBody;

解决方案：两种实现方式，按需选择 #

方式一：直接传递状态与方法（推荐当前场景）

因为当前组件层级极简单，直接通过React.cloneElement给子组件注入属性是最轻便的方案，不需要引入Context。

修改后的核心代码：

Dropdown.js（主组件）

import useExpandDropdown from "../Hooks/useExpandDropdown";
import DropdownBody from "./DropdownBody";
import DropdownTitle from "./DropdownTitle";
import React from 'react';

const Dropdown = ({ children }) => {
  const [isExpanded, toggleExpand] = useExpandDropdown();

  // 遍历子元素，给对应组件注入所需属性
  const processedChildren = React.Children.map(children, child => {
    if (child.type === Dropdown.Title) {
      // 给Title绑定切换方法
      return React.cloneElement(child, { onClick: toggleExpand });
    }
    if (child.type === Dropdown.Body) {
      // 给Body传递展开状态
      return React.cloneElement(child, { isExpanded });
    }
    return child;
  });

  return <div>{processedChildren}</div>;
};

Dropdown.Title = DropdownTitle;
Dropdown.Body = DropdownBody;

export default Dropdown;

DropdownTitle.js

const DropdownTitle = ({ children, onClick }) => {
  return <div onClick={onClick} style={{ cursor: 'pointer' }}>{children}</div>;
};

export default DropdownTitle;

DropdownBody.js

const DropdownBody = ({ isExpanded, children }) => {
  // 根据状态控制显示隐藏
  return isExpanded ? <div>{children}</div> : null;
};

export default DropdownBody;

方式二：使用Context（适合未来扩展复杂结构）

如果以后要给Dropdown添加更多子组件（比如自定义触发器、头部/尾部），或者子组件嵌套更深，用Context可以避免逐层传参的麻烦。

步骤1：创建DropdownContext

// DropdownContext.js
import { createContext, useContext } from 'react';

const DropdownContext = createContext();

export const useDropdownContext = () => {
  const context = useContext(DropdownContext);
  if (!context) {
    throw new Error('useDropdownContext必须在Dropdown组件内部使用');
  }
  return context;
};

export default DropdownContext;

步骤2：修改Dropdown主组件提供Context

// Dropdown.js
import useExpandDropdown from "../Hooks/useExpandDropdown";
import DropdownBody from "./DropdownBody";
import DropdownTitle from "./DropdownTitle";
import DropdownContext from "./DropdownContext";

const Dropdown = ({ children }) => {
  const [isExpanded, toggleExpand] = useExpandDropdown();

  const contextValue = {
    isExpanded,
    toggleExpand
  };

  return (
    <DropdownContext.Provider value={contextValue}>
      {children}
    </DropdownContext.Provider>
  );
};

Dropdown.Title = DropdownTitle;
Dropdown.Body = DropdownBody;

export default Dropdown;

步骤3：子组件使用Context

// DropdownTitle.js
import { useDropdownContext } from './DropdownContext';

const DropdownTitle = ({ children }) => {
  const { toggleExpand } = useDropdownContext();
  return <div onClick={toggleExpand} style={{ cursor: 'pointer' }}>{children}</div>;
};

export default DropdownTitle;

// DropdownBody.js
import { useDropdownContext } from './DropdownContext';

const DropdownBody = ({ children }) => {
  const { isExpanded } = useDropdownContext();
  return isExpanded ? <div>{children}</div> : null;
};

export default DropdownBody;

选择建议 #

• 当前简单场景（仅Title+Body）：用方式一，代码简洁无额外开销。
• 未来有复杂扩展需求：用方式二，代码更易维护，避免大量属性传递。

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