如何使用相同的道具重复渲染相同的组件？

const data = [1, 2, 3, 4, 5];

const Component = ({ item }) => {
  return <div>{item}</div>;
};

const App = () => {
  return (
    <div>
      {data.map((item) => (
        <Component key={item} item={item} />
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

const Component = ({ show }) => {
  if (show) {
    return <div>Component</div>;
  } else {
    return null;
  }
};

const App = () => {
  const shouldShow = true;

  return <Component show={shouldShow} />;
};

ReactDOM.render(<App />, document.getElementById("root"));

<template>
  <div>
    <component :is="componentName" />
  </div>
</template>

<script>
import ComponentA from "./ComponentA.vue";
import ComponentB from "./ComponentB.vue";

export default {
  data() {
    return {
      componentName: "ComponentA",
    };
  },
  methods: {
    toggleComponent() {
      this.componentName = this.componentName === "ComponentA" ? "ComponentB" : "ComponentA";
    },
  },
};
</script>