使用react js和反应路由器访问当前活动路由的自定义道具

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>
      );
    }
   }

当控制台登录“single.js”时，我得到以下输出。

         console.log(this.props.posts)