ReactJS如何创建支持自定义className的复用组件避免代码冗余？

完全不需要重复编写组件逻辑，只需改造基础组件开放类名自定义入口即可，改造成本极低：

第一步：改造通用Searchbar组件 #

给组件添加可传入的类名props，同时保留默认值兼容原有使用场景：

export const Searchbar = ({
  // 容器类名，默认用原有的search，也可自定义传入
  containerClassName = "search",
  // 输入框类名，默认用PC端的inputSearch
  inputClassName = "inputSearch",
  // 还可根据需求开放更多可自定义参数，比如占位文本
  placeholder = "Search..."
}) => {
  // 原有组件内部的业务逻辑完全保留，不需要修改
  return (
    <div className={containerClassName}>
      <input
        type="text"
        placeholder={placeholder}
        className={inputClassName}
      />
    </div>
  );
}

如果需要同时保留基础类名和自定义类名叠加使用，可以修改为字符串拼接的写法，比如：

// 基础search类名永远保留，传入的containerClassName作为补充样式
<div className={`search ${containerClassName || ''}`}>

第二步：不同场景直接调用即可 #

• PC端场景沿用默认参数，不需要额外传值：

  <Searchbar />
  

• 移动端场景传入对应自定义输入框类名即可：

  <Searchbar inputClassName="inputSearchPhone" />
  

如果后续还有其他场景需要不同样式，只需要传入对应类名即可，不需要再新增组件。

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