如何在同一表面一次显示一个创建的组件？

Question

我会尽可能清楚地解释我的问题！

我正在使用 React 和 Material-UI 开发一个网站。在我的一个页面中，我得到了一个表面（这里是来自 MUI 的一个组件）。在这篇论文中，我想展示我开发的一些组件，但我想一次只展示一个。

我已经实现了 MUI 中的一个组件，以使用页码作为要显示哪个组件的参考。

想象一下这样的事情：

<Paper>
  <Grid container>
     <Grid item>
         <OWN COMPONENTS>
     </Grid>
  </Grid>
  <Grid item>
     <Stack>
        <Pagination count={nbPage} color='primary' onChange={handleChange} />
     </Stack>
  </Grid>
</Paper>

从这个框架来看，如果 pageNumber 为 1，我想显示 OWNCOMPONENT_1，如果 pageNumber 为 2，我想显示 OWNCOMPONENT_2，等等

我没有从 Pagination MUI 组件中找到任何显示组件但仅列出的示例。我尝试使用 return 组件所需的开关功能，但视觉结果已损坏。我也尝试过路由解决方案，但我对它的掌握还不够，无法做一些有用的事情。

我希望我所说的一切都是可以理解的，我愿意接受任何解决方案，即使我必须改变渲染方式来呈现我想要的内容。

我仍然是 React 和 JS 的新手，所以我可能需要解释:)

Answer 1

您可以设置状态更改时的页码，并根据该状态显示组件。我在沙盒中添加了一个解决方案：https://codesandbox.io/s/basicpagination-material-demo-forked-5q78eq?file=/demo.tsx

如何在同一表面一次显示一个创建的组件？

How to display created components one at a time in the same surface?

javascript

reactjs

material-ui