javascript - React.js 带 react 路由器 : Should my components 'react' to the changes in url or vice versa?

标签 javascript reactjs react-router url-routing state

我的问题更多是关于与我的应用的路由以及随后呈现的组件相关的高级设计决策。

我的应用有多个“页面”/“部分”。导航到这些部分可以简单地使用基本路由来处理。这些部分之一是“lookbook”,并且有一个类似于 Instagram 的照片源(路径是“/lookbook”)。如果我要单击此 photofeed 中的照片,我希望出现一个模式,其中包含带有一些额外数据的扩展照片。

我的问题归结为提要中其中一张照片的 onClick 事件应该发生什么。 (这个非常具体的功能是我的问题的来源,因为我相信它将决定我应该如何设计组件的行为方式。)

在 onClick 事件中,是否更有意义:

A) 只需导航到一条路线,例如“/lookbook/photoId”。然后让父 Lookbook 组件感知 URL 更改,然后只提供我想要的内容。

B) 更改 Lookbook 组件的状态,以在模式中展开点击的照片(无 URL 更改)。

最佳答案

这个问题的答案几乎完全取决于你喜欢如何思考这个问题。

A有一定的优势。它更干净,可能更容易编码,将是我的第一选择。每张照片都会根据 ID 将您定向到不同的 URL,并且一个单独的组件会完全满足它。

另一方面,B 会使您的 photoID 成为父组件(索引页面)状态的一部分。根据此状态,您可以创建模态。这会使您的组件比 A 稍微复杂一些,但在这里,您只有一个组件完成整个工作,并且组件之间的职责分工很明确。

任何一种方式都是绝对正确的,这取决于您如何看待您的组件以及每个组件所服务的目标。

关于javascript - React.js 带 react 路由器 : Should my components 'react' to the changes in url or vice versa?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40980830/

相关文章:

javascript - 将文本中的 <a> 替换为 React <Link>

javascript - ReactJS React 路由器参数

javascript - 如何使容器居中并使网页适合移动设备?

javascript - 在 react 中从父dom节点中删除子组件

css - 如何使用 React 更改选定表格行的背景颜色

javascript - ReactJS(初学者)使用 Youtube API - 返回的对象不允许我访问 VideoId 属性

javascript - 点对点套接字 IO

javascript - 如何在光标处添加字符?

javascript - 我需要用最少的脚本或 Jquery 代码对 html 页面中的值求和

reactjs - 登录 react 路由器后如何重定向到上一页?