如何将onChange从Dropdown父组件批量传递给子DropdownItem组件

针对你的需求，有几种不同的方案可以避免重复写属性，每种都有适用场景：

1. React.Children.map + React.CloneElement（通用标准方案） #

这其实是React官方推荐的批量处理子组件属性的方式，并不冗余。在Dropdown组件内部实现遍历注入：

function Dropdown({ onChange, children }) {
  return (
    <div className="dropdown-wrapper">
      {React.Children.map(children, child => {
        // 仅针对DropdownItem组件注入属性，防止影响其他子元素
        if (child.type === DropdownItem) {
          return React.cloneElement(child, { onChange });
        }
        return child;
      })}
    </div>
  );
}

外部调用完全不用修改，Dropdown会自动把onChange传给每个子DropdownItem，逻辑集中维护更省心。

2. Context共享（适配多层嵌套/动态子组件） #

如果你的组件结构有多层嵌套（比如DropdownItem外面包了其他组件），用Context更灵活：

• 先创建Context：

const DropdownContext = React.createContext(null);

• 在Dropdown中提供Context：

function Dropdown({ onChange, children }) {
  return (
    <DropdownContext.Provider value={{ onChange }}>
      <div className="dropdown-wrapper">{children}</div>
    </DropdownContext.Provider>
  );
}

• 在DropdownItem中消费Context：

function DropdownItem({ value, children }) {
  const { onChange } = useContext(DropdownContext);
  return (
    <div 
      className="dropdown-item"
      onClick={() => onChange?.(value)}
    >
      {children}
    </div>
  );
}

这种方式不用遍历子组件，只要DropdownItem在Dropdown范围内就能自动拿到onChange，适合动态生成子元素的场景。

3. 抽离选项数据循环生成（静态列表最优解） #

如果你的下拉选项是静态的，直接把数据抽出来在Dropdown内部生成子组件最简洁：

// 外部调用
<Dropdown 
  onChange={(s) => setValue(s)}
  options={[
    { value: "sample", label: "Sample" },
    { value: "sample2", label: "Sample2" }
  ]}
/>

// Dropdown组件实现
function Dropdown({ onChange, options }) {
  return (
    <div className="dropdown-wrapper">
      {options.map(opt => (
        <DropdownItem 
          key={opt.value}
          value={opt.value}
          onChange={onChange}
        >
          {opt.label}
        </DropdownItem>
      ))}
    </div>
  );
}

这种写法彻底消除了重复的DropdownItem代码，外部只需要传递数据，维护成本最低。

方案选择建议 #

• 固定结构的子组件：选方案1，直接且符合React组件设计；
• 多层嵌套/动态子组件：选方案2，灵活无侵入；
• 静态选项列表：选方案3，最简洁高效。

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