2个几乎相同的组件Reactjs

Question

我开始学习 ReactJS，有没有办法用另一个类名创建一个克隆组件？例如。将出现在两个不同位置并具有不同样式的搜索栏，当然，对于 copy/paste 新组件的所有代码来说太丑了。

提前致谢。

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>
  );
}

Answer 1

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

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

<Searchbar inputClass="inputSearch" />

<Searchbar inputClass="inputSearchPhone" />

2个几乎相同的组件Reactjs

2 almost identical components Reactjs

components

reactjs