2 个几乎相同的组件 Reactjs答案

【问题标题】：2 almost identical components Reactjs2 个几乎相同的组件 Reactjs
【发布时间】：2021-12-10 14:04:42
【问题描述】：

我开始学习 ReactJS，有没有办法用另一个类名创建一个克隆组件？例如。一个搜索栏会出现在两个不同的地方并具有不同的样式，当然，对于复制/粘贴新组件的所有代码来说太难看了。

提前致谢。

export const Searchbar = () => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className="inputSearch"
      />
    </div>
  );
}

还有一个

export const SearchbarPhone = () => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className="inputSearchPhone"
      />
    </div>
  );
}

【问题讨论】：

标签： reactjs components

【解决方案1】：

传递一个道具，并使用该道具设置类名。

export const Searchbar = ({ inputClass }) => {
.
.
return (
    <div className="search">
      <input
        type="text"
        placeholder="Search..."
        className={inputClass}
      />
    </div>
  );
}

<Searchbar inputClass="inputSearch" />

<Searchbar inputClass="inputSearchPhone" />

【讨论】：