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

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

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

如果 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 传递并使用扩展运算符