Question

基本上我的问题围绕了父组件和子组件之间关系的最佳实践，以及如何使用路径中的特定道具呈现子组件，以共享URL链接（如在Facebook上共享内容）。

例如：

我的父组件是 Photos 容器，它负责呈现 PhotoFeed 组件（后者又呈现 PhotoFeedItem 组件）。< / p>

我有一条这样简单的路线：

<Route path="photos" component={Photos} onEnter = {onPageEnter}/>

这将呈现“照片”部分，该部分在到达时呈现 PhotoFeed 。当用户点击 PhotoFeedItem 时， PhotoDetails 组件呈现的基本上是扩展图像的模态，以及有关照片的更多详细信息，如评论，标签等。这个功能已经开发出来了，当用户登陆“照片”部分时，我已经正常工作了。

我的组件结构可以这样概括：

<Photos>

  <PhotoFeed>
    <PhotoFeedItem onClick={this.expandPhoto}/> * n
  </PhotoFeed>

  {this.state.expanded ? <PhotoDetails data={this.state.photoToExpand}/>

</Photos>

状态测试检查用户是否已单击 PhotoFeedItem ，如果是，则使用有关照片的更详细数据呈现展开的 PhotoDetails 模式。

我的主要问题是，在根据路线呈现特定子组件方面是否存在任何最佳实践。它就像创建这样的路线一样简单：

<Route path="photos" onEnter = {onPageEnter}>
    <IndexRoute component={Photos} onEnter = {onPageEnter}/>
    <Route path=":photoId" component={PhotoDetails}/>
</Route>

因此，可共享的URL将类似于www.myapp.com/photos/12，从而启动 PhotoDetails 模式，在我们的数据库中具有id 12（或类似的东西）？

我想我的问题归结为这些想法/顾虑：

到目前为止，我已经获取 Photos 父组件并将所有数据传递给其子组件。根据用户点击的 FeedItem ，它将使用更详细的数据正确启动扩展模式。现在....如果我想实现可共享的URL，我应该如何用数据填充 PhotoDetails 组件？我的 PhotoDetails 模式应该从其父级（ Photos.js ）接收数据，还是应该查看URL并使用它来确定从哪个ID /端点获取自己的数据？

如果我仍然可以通过在父照片组件中保存数据来实现可共享的URL，我如何在路由中反映这一点（最终可以在社交媒体，电子邮件，等）？

React.js：在路由到父容器

0 个答案: