React组件Props复用优化咨询：如何提取重复Props提升代码复用性

当然可以提升这段代码的复用性，最直接的思路就是把两个组件共用的Props提取成单独对象，再根据条件动态选择要渲染的组件，最后通过对象解构传递Props，具体实现如下：

优化后的代码 #

// 提取公共Props到对象中
const commonSelectProps = {
  options,
  value,
  onChange: valueSetter // 简化原有的包裹函数，参数传递逻辑完全一致
};

// 根据creatable条件确定要渲染的组件
const TargetSelect = creatable ? CreatableSelect : Select;

return <TargetSelect {...commonSelectProps} />;

核心优化点说明 #

• 消除重复代码：把options、value、onChange这些重复的Props统一存入commonSelectProps，后续修改或新增Props只需调整这一处。
• 动态选择组件：用变量TargetSelect承接选中的组件（注意组件名首字母大写，符合React组件命名规范），避免冗余的三元表达式嵌套。
• 简化回调函数：原代码中onChange={(selectedValue) => valueSetter(selectedValue)}可以直接简化为onChange: valueSetter，因为两者的参数传递逻辑完全一致，减少不必要的函数包裹。

这样修改后，代码不仅更简洁，后续维护成本也更低——比如要新增一个placeholder Props，只需在commonSelectProps里添加一次，两个组件都会自动获得该属性。

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