React通用Dropdown组件跨场景复用的最优实现方案咨询

这类通用组件需要适配多业务场景的需求，核心设计思路是受控+非受控兼容模式 + 渲染Props/函数式Children，既保证通用组件的无业务侵入性，又能满足不同场景的个性化定制需求，同时完全兼容原有调用逻辑，无破坏性更新。

原有方案弊端说明 #

• 方案1（内部分支判断）：将业务逻辑耦合到通用组件内部，每新增场景都需要修改Dropdown组件代码，违反开闭原则，场景多了之后可维护性极差
• 方案2（回调透传状态）：思路方向正确，但仅支持在点击回调中获取状态，无法覆盖自定义渲染、父组件全局使用状态等更复杂的需求

优化后通用Dropdown实现 #

import React, { useState, useMemo } from "react";

export default function DropDown(props) {
  // 兼容受控/非受控模式：外部传入menuOpen则使用外部状态，否则使用内部托管状态
  const [innerMenuOpen, setInnerMenuOpen] = useState(false);
  const menuOpen = useMemo(() => {
    return props.menuOpen ?? innerMenuOpen;
  }, [props.menuOpen, innerMenuOpen]);

  const setMenuOpen = (val) => {
    if (props.menuOpen !== undefined) {
      // 受控模式下通知父组件更新状态
      props.onMenuOpenChange?.(val);
    } else {
      // 非受控模式下更新内部状态
      setInnerMenuOpen(val);
    }
  };

  const clickHandler = () => {
    const newOpenState = !menuOpen;
    setMenuOpen(newOpenState);
    setTimeout(() => {
      setMenuOpen(false);
    }, 2000);
    // 所有回调透传当前内部状态
    props.onClick?.(newOpenState);
  };

  return (
    <>
      {/* 支持自定义触发器渲染，无传入则使用默认触发器 */}
      {props.renderTrigger ? (
        props.renderTrigger({ menuOpen, onClick: clickHandler })
      ) : (
        <p onClick={clickHandler}>Dropdown</p>
      )}
      {/* 支持自定义下拉内容，children为函数时传入内部状态供自定义使用 */}
      {menuOpen && (
        typeof props.children === "function" 
          ? props.children({ menuOpen }) 
          : <p>{props.text}</p>
      )}
    </>
  );
}

不同场景调用示例 #

1. 简单场景（保存按钮，原有逻辑完全兼容） #

不需要任何自定义的简单场景，原有调用代码无需修改：

import React from "react";
import DropDown from "./DropDown";

export default function SaveButton() {
  return (
    <DropDown text="Save" onClick={() => console.log("Saved")}/>
  );
}

2. 中等复杂度场景（明暗模式切换，仅回调需要状态） #

直接使用回调透传的menuOpen参数即可：

import React from "react";
import DropDown from "./DropDown";

export default function LightDark() {
  return (
    <DropDown 
      text="切换模式" 
      onClick={(menuOpen) => console.log(menuOpen ? "light" : "dark")}
    />
  );
}

3. 高复杂度场景（完全自定义渲染+父组件托管状态） #

需要自定义触发器、自定义下拉内容、父组件其他地方用到状态的场景，使用受控模式即可：

import React, { useState } from "react";
import DropDown from "./DropDown";

export default function LightDark() {
  // 父组件托管menuOpen状态
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <p>当前下拉状态：{menuOpen ? "展开" : "收起"}</p>
      <DropDown 
        menuOpen={menuOpen}
        onMenuOpenChange={setMenuOpen}
        // 自定义触发器样式与内容
        renderTrigger={({menuOpen, onClick}) => (
          <button onClick={onClick}>
            {menuOpen ? "收起下拉" : "切换模式"}
          </button>
        )}
        onClick={(menuOpen) => console.log(menuOpen ? "light" : "dark")}
      >
        {/* 自定义下拉区域内容 */}
        {({menuOpen}) => (
          <div className="custom-dropdown-content">
            当前模式：{menuOpen ? "亮色模式" : "暗色模式"}
          </div>
        )}
      </DropDown>
    </>
  );
}

方案优势 #

• 无业务耦合：通用组件内部完全不感知业务场景，新增场景不需要修改组件代码
• 向下兼容：原有调用逻辑不需要任何修改，无破坏性更新
• 灵活性高：覆盖从极简到高度定制的所有业务场景，符合业内主流组件库的设计规范

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