如何优雅地在React组件中传递大量参数？

当组件需要接收大量props时，代码冗余和可读性问题确实会凸显，下面是几个能直接落地的优化思路：

1. 按类型分组打包传递 #

把常规属性和事件处理函数分别归类到不同的对象中，再通过展开运算符传递，让代码结构更清晰：

// 父组件中按类型分组
const baseProps = {
  prop1,
  prop2,
  // ... 剩余11个常规props
  prop13
};

const eventHandlers = {
  onEventProps1: handleEventProps1,
  onEventProps2: handleEventProps2,
  // ... 剩余7个事件props
  onEventProps9
};

// 组件调用时直接展开分组对象
<MyComponent {...baseProps} {...eventHandlers} />

你还可以根据业务逻辑进一步细分（比如把表单相关props单独打包），后续维护时直接找对应分组修改即可。

2. 利用父组件props解构简化 #

如果这些props本身就是父组件接收的，可以直接解构提取，避免重复声明：

// 父组件中解构出子组件需要的props
function ParentComponent({ 
  prop1, prop2, /* ... */ prop13,
  onEventProps1, onEventProps2, /* ... */ onEventProps9,
  // 父组件自身需要的props单独提取
  parentOwnProp
}) {
  return (
    <MyComponent
      prop1={prop1}
      prop2={prop2}
      {/* ... 其他props */}
      onEventProps9={handleEventProps9}
    />
  );
}

如果父组件props和子组件需要的props命名完全一致，甚至可以用剩余参数直接传递：

function ParentComponent(props) {
  // 过滤掉父组件自身专属的props
  const { parentOwnProp, ...childProps } = props;
  return <MyComponent {...childProps} />;
}

3. 拆分组件职责（最根本的优化） #

一个组件接收22个props，很大概率是它的职责过于繁杂。尝试把组件拆分成多个专注单一功能的子组件：

• 把表单输入相关部分拆成MyComponentForm
• 把操作按钮/事件逻辑部分拆成MyComponentActions
• 把纯展示类内容拆成MyComponentDisplay

拆分后，每个子组件只接收和自身职责相关的少量props，不仅传参更简洁，后续维护和复用性也会大幅提升。

4. 用配置对象管理固定props #

如果部分props是固定值或在多处重复使用，可以把它们放到统一的配置对象中：

// 定义固定配置
const DEFAULT_COMPONENT_SETTINGS = {
  prop3: 'default-value',
  prop7: true,
  // ... 其他固定props
};

// 动态props单独传递
<MyComponent 
  {...DEFAULT_COMPONENT_SETTINGS}
  prop1={prop1}
  prop2={prop2}
  onEventProps1={handleEventProps1}
  // ... 其他动态props
/>

5. 使用Context API避免跨层级props传递 #

如果这些props需要在多层嵌套组件中传递，可以用React Context统一注入，避免“props drilling”：

// 创建Context
const MyComponentContext = React.createContext();

// 父组件作为Provider注入props
function ParentComponent() {
  const componentData = {
    // 所有需要传递的props和事件处理函数
    prop1,
    onEventProps1: handleEventProps1,
    // ...
  };
  return (
    <MyComponentContext.Provider value={componentData}>
      <MyComponent />
    </MyComponentContext.Provider>
  );
}

// 子组件中直接获取Context值
function MyComponent() {
  const { prop1, onEventProps1 } = useContext(MyComponentContext);
  return <div onClick={onEventProps1}>{prop1}</div>;
}

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