【问题标题】：Best way to handle similar components in ReactJS?在 ReactJS 中处理类似组件的最佳方法是什么？
【发布时间】：2020-02-27 12:41:32
【问题描述】：

考虑一个项目中有两个相似的组件。一个只包括额外的按钮，其他功能完全相同。创建这些组件的最佳方法是什么？我做了一个例子你可以更清楚地理解我的意思Example for similar Components（请省略不使用关键道具等小错误。）当然例子可以更复杂。

我想到的一些解决方案；

1-我可以传递控制属性并使用三元运算来渲染按钮。（我认为这会导致不必要的检查）

2- 创建两个单独的组件（我在示例中所做的）。（它似乎并不干燥）

3- HOC 可以用，但我想不通。

如果有HOC解决方案或其他明智的请分享，提前感谢

我也分享代码；

const SelectionCard = ({ name }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
    </div>
  );
};

const AlmostSameCard = ({ name }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
      <button>{name}</button>
    </div>
  );
};

edit：大多数答案都集中在我给出的示例上。我们应该怎么做边缘情况，比如太多的条件、大量的渲染数据等。

【问题讨论】：

传递一个 props 并使用 condition rendering 似乎很简单。
这个例子很简单，但是；考虑到有 4 个不同的 props，我应该放 4 个不同的 if block 还是 switch？
如果您只需要使用一个组件并且使用三元检查，则需要控制道具。

标签： reactjs components react-component

【解决方案1】：

条件元素

组件将根据您传递的道具进行渲染。您应该渲染对该组件有意义的元素。但请确保组件不会因大的条件部分而变得臃肿。

您的卡片组件可以包含可选元素，例如日期、文本、标签、标签。只需有条件地渲染具有内容的部分即可。

const SelectionCard = ({ name, buttonText }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
      {buttonText && <button>{buttonText}</button>}
    </div>
  );
};

【讨论】：