React.js w/ react-router:我的组件应该 'react' 到 url 的变化还是相反?
React.js w/ react-router: Should my components 'react' to the changes in url or vice versa?
我的问题更多是关于关于我的应用程序路由的高级设计决策,以及渲染的后续组件。
我的应用有多个 "pages" / "sections"。导航到这些部分可以简单地使用基本路由来处理。这些部分之一是 'lookbook' 并且有一个类似于 Instagram 的照片源(路径是“/lookbook”)。如果我要单击此 photofeed 中的照片,我希望出现一个模式,其中包含带有一些额外数据的扩展照片。
我的问题归结为提要中其中一张照片的 onClick 事件应该发生什么。 (这个非常具体的功能是我问题的来源,因为我相信它将决定我应该如何设计组件的行为方式。)
在 onClick 事件中,是否更有意义:
A) 只需导航到一条路线,例如“/lookbook/photoId”。然后让父 Lookbook 组件感知 URL 变化,然后只提供我想要的。
或
B) 更改 Lookbook 组件的状态,以在模态框内展开单击的照片(无 URL 更改)。
这个问题的答案几乎完全取决于您如何看待这个问题。
A有一定的优势。它更干净,可能更容易编码,将是我的第一选择。每张照片都会根据 ID 将您引导至不同的 URL,并且 单独的组件 完全可以满足它。
B 另一方面会使您的 photoID 成为父组件(索引页面)状态的一部分。根据此状态,您可以创建模态。这会使您的组件比 A 复杂一点,但在这里,您只有一个组件完成所有工作,并且组件之间的职责分工很明确。
任何一种方式都是绝对正确的,这取决于您如何看待您的组件以及每个组件所服务的objective。
在反应中思考,您应该将回调函数传递给您的提要组件,并在单击提要图像时使用回调函数更改回溯组件的状态。这是反应方法,现在一切都取决于你状态变化是表示 URL 变化还是模态状态变化。
我的问题更多是关于关于我的应用程序路由的高级设计决策,以及渲染的后续组件。
我的应用有多个 "pages" / "sections"。导航到这些部分可以简单地使用基本路由来处理。这些部分之一是 'lookbook' 并且有一个类似于 Instagram 的照片源(路径是“/lookbook”)。如果我要单击此 photofeed 中的照片,我希望出现一个模式,其中包含带有一些额外数据的扩展照片。
我的问题归结为提要中其中一张照片的 onClick 事件应该发生什么。 (这个非常具体的功能是我问题的来源,因为我相信它将决定我应该如何设计组件的行为方式。)
在 onClick 事件中,是否更有意义:
A) 只需导航到一条路线,例如“/lookbook/photoId”。然后让父 Lookbook 组件感知 URL 变化,然后只提供我想要的。
或
B) 更改 Lookbook 组件的状态,以在模态框内展开单击的照片(无 URL 更改)。
这个问题的答案几乎完全取决于您如何看待这个问题。
A有一定的优势。它更干净,可能更容易编码,将是我的第一选择。每张照片都会根据 ID 将您引导至不同的 URL,并且 单独的组件 完全可以满足它。
B 另一方面会使您的 photoID 成为父组件(索引页面)状态的一部分。根据此状态,您可以创建模态。这会使您的组件比 A 复杂一点,但在这里,您只有一个组件完成所有工作,并且组件之间的职责分工很明确。
任何一种方式都是绝对正确的,这取决于您如何看待您的组件以及每个组件所服务的objective。
在反应中思考,您应该将回调函数传递给您的提要组件,并在单击提要图像时使用回调函数更改回溯组件的状态。这是反应方法,现在一切都取决于你状态变化是表示 URL 变化还是模态状态变化。