基于道具创建新的 React 元素是一种好的做法吗？

Question

下面的代码确实有效，但我想知道这是否是一个好的做法。因为对我来说，这听起来像是我违反了规则。但我看不到其他方法可以做我想做的事。我想呈现 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 组件并设置这个道具。

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

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

基于道具创建新的 React 元素是一种好的做法吗？

Is a good practice to create a new React element based on props?

reactjs

components

composition

open-closed-principle