查找当前路由的索引，然后使用React JS和React Router将索引传递给组件道具

Question

我遵循的情况是我有几个帖子链接路由到他们所属的单个页面。问题是，我在单个页面中使用相同的组件来显示照片，但无法弄清楚如何传递当前索引索引，因此只显示当前索引的照片。我正在使用react路由器并通过api调用检索我的数据。

Single.js：

 export default class single extends React.Component {

 constructor() {
   super();
 }

static propTypes = {
  posts: React.PropTypes.array.isRequired,
 };

 render() {
  const { postId } = this.props.params;
  const i = this.props.posts.findIndex((post) => post._id === postId);
  const post = this.props.posts[i];

  return (
    <section className="blog-landing-page">  
      <Photo {...this.props} key={i} i={i} post={post} />
   </section>
     );
  }
}

Photo.js

  export default class posts extends React.Component {
    constructor() {
     super();
   }
   render() {
     const { post, i} = this.props;
      return (
        <section>
         <Link to={`/post/${post.key}`}>
             <img src={post.image.url} alt='' className="grid-photo" />
         <h1>{post.name}</h1>
         </Link>
       </section>
      );
    }
   }

当控制台记录在内时＆＃34; single.js＆＃34;我得到以下输出。

         console.log(this.props.posts)

Answer 1

在您的路线组件上，您可以将数据作为params 访问，然后将其传递给孩子。

class SomeRoute extends Component {
    render () {
      <Child photoId = {this.props.params.photoId} />
    }
}

您只需确保命名路线参数

<Route path="/foo/:photoId/bar" component={SomeRoute }/>