如何在每次单击 .map 项目列表中的每个项目时呈现不同的数据？

Question

这个问题本身就很混乱，但我想要实现的是我在数据库中有三个餐厅数据，我通过在餐厅名称列表上调用 .map 方法在三张卡片上显示他们的名字，现在我想做一些类似的事情每当有人点击一张卡片时，他都会被带到一个页面，在那里他可以找到关于该特定餐厅的所有信息，它的菜肴应该能够对它们进行评分，那么这个路由是如何发生的？我是否应该创建三个单独的页面，但如果我有三个以上的页面会变得一团糟怎么办？或者有一种方法可以在单击不同的卡片时动态显示不同的数据？供您参考，我在这个项目中使用 MERN Stack。

Answer 1

不，您不必创建单独的页面，您只需要创建一个 detailsPage 组件并传递包含您单击的卡详细信息（餐厅）的所需道具。所以基本上你将首先在你的组件中初始化一个本地状态对象，它显示这样的卡片：this.state = {&nbsp; restaurantName : '',&nbsp; restuarantId: '',&nbsp; showDetails: false,}然后将卡片上的点击处理程序绑定到某个函数，例如：const onCardClick = (id,name) => {&nbsp; &nbsp;this.setState({&nbsp; &nbsp; showDetails: true,&nbsp; &nbsp; restuarantName: name,&nbsp; &nbsp; restaurantId: id&nbsp; })}现在在您的渲染方法中，只需使用 if 条件渲染您的详细信息组件，以便它仅在 showDetails 设置为 true 时显示，并且它会收到适当的 ID 和名称return(){&nbsp; .....&nbsp; // your previous code.....&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; this.state.showDetails &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<DetailsPage id=this.state.id name=this.state.name />&nbsp; &nbsp; }&nbsp; }注意：如果您想将详细信息页面显示为弹出窗口或卡片下方，上述方法很有用，如果您想路由到新页面，则可以进行条件路由，但是创建单个组件的想法仍然相同并向其传递适当的道具。