基于 props 创建新的 React 元素是一种好习惯吗？答案

【问题标题】：Is a good practice to create a new React element based on props?基于 props 创建新的 React 元素是一种好习惯吗？
【发布时间】：2022-01-03 08:10:19
【问题描述】：

以下代码实际上有效，但我想知道这是否是一个好习惯。因为对我来说，这听起来像是我违反了规则。但我没有看到其他方法来做我想做的事。我想渲染 2 个使用相同逻辑构建但渲染不同类型项目的列表。如果您知道更好的方法，请告诉我。

function App() {
  const data = [1, 2, 3];
  return (
    <>
      <ItemList ItemComponent={BlueItem} data={data} />
      <ItemList ItemComponent={RedItem} data={data} />
    </>
  );
}

function ItemList({ ItemComponent, data }) {
  return (
    <ul>
      {data.map((value) => {
        return <ItemComponent value={value} />;
      })}
    </ul>
  );
}

function BlueItem({ value }) {
  return (
    <li className="BlueItem" /* + specifics attributes for BlueItem */>
      {value}
    </li>
  );
}

function RedItem({ value }) {
  return (
    <li className="RedItem" /* + specifics attributes for RedItem */>
      {value}
    </li>
  );
}

更新： 有关更多详细信息，这实际上是一个简化的示例。在我的真实代码中，BlueItem 和 RedItem 要复杂得多。他们有几个特定的子组件、状态逻辑、事件监听等......这就是为什么我不只使用通用的 Item 组件并设置这个道具。

【问题讨论】：

对于工作代码，请尝试codereview.stackexchange.com
这是一种完全有效的模式，并且使用了可组合的接口。如果你使用 TypeScript，你可以编写代码并帮助强制执行。如果你最终得到了太多单独的组件（主观的），那么你就需要考虑整合和重构一些东西（可以使其更容易测试）。如果您只是根据一组枚举值交替使用几个 props（例如 className），那可能就有点过分了；在这种情况下，您需要定义该枚举并制作一个使用该枚举的道具，并基于此设置 className 和/或其他道具。
@jmargolisvt 抱歉，这篇文章的位置有误。下次我会做得更好。
@Derek 非常感谢您的解释。这让我对自己的代码结构更有信心。

标签： reactjs components composition open-closed-principle

【解决方案1】：

如果 BlueItem 和 RedItem 都具有特定属性并且难以在组件外处理，则看起来很好。请参阅下面的 React Router 示例

function App() {
    return (
        <main>
            <Switch>
                <Route path="/" component={Home} exact />
                <Route path="/about" component={About} />
                <Route path="/shop" component={Shop} />
            </Switch>
        </main>
    )
}

如果属性很简单，最好将它们作为对象保留在外面并作为道具传递并使用扩展运算符

【讨论】：