将Parent的道具传递给子组件时无法获取参数

Question

我正在尝试构建一个简单的应用，只使用App Component作为IndexRoute列出博客

＆＃13;

＆＃13;

<Router history={browserHistory}>
  <Route path="/" component={Root}>
    <IndexRoute component={() => <App loader={this.props.fetching} posts={this.props.posts} fetching={this.props.fetching} fetched={this.props.fetched} />}>
    </IndexRoute>
    <Route path="form" component={Form}></Route>
    <Route path="about" component={About}></Route>
    <Route path="post/:id" component={SinglePost}></Route>
  </Route>
</Router>

＆＃13;

＆＃13;

＆＃13;

我想在点击标题时使用single显示SinglePost Component博文。

＆＃13;

＆＃13;

import React from 'react';

class SinglePost extends React.Component {
	render(){
	  console.log("Single Post Props", this.props);
  	  return(
	    <div>
	      Passed: {this.props.params.id}
        </div>
	  );
	}
}

export default SinglePost;

＆＃13;

＆＃13;

＆＃13;

所以，我得到它的id。我可以访问它。在App组件：

中使用它

<Route path="post/:id" component={SinglePost}></Route>

但是，我想传递父

中的posts道具

const mapStateToProps = (state) => {
return {
    fetching: state.fetching,
    fetched: state.fetched,
    posts: state.posts,
    error: state.error
};  };

我改变了路由器中的component = {}：

<Route path="post/:id" component={SinglePost}></Route>

进入这个（因为我搜索到这是在react-router [react-router - pass props to handler component）中传递道具的方式：

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

现在，我收到此错误，因为它没有获得params道具。

如何再次访问params道具，以便通过posts传递params数组？id？

Answer 1

您正在使用箭头功能。箭头函数不会自动绑定此值，因此您需要手动绑定此值。

代码片段不起作用，它不会，因为你只是简单地用纯HTML粘贴JSX代码。

但是，更换

convert Abyssinian_1.jpg \( Abyssinian_1trimap.png -fill white -opaque "rgb(1,1,1)" -fill black -opaque "rgb(3,3,3)" -opaque "rgb(2,2,2)" -blur 0x8  \) -compose darken -composite pet.png

带

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

应该可以使用，或者您可以使用function（）{}为您绑定它。

编辑：

在react-router

中传递道具的首选方式

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts.bind(this)}/>} />

这可以在单一帖子组件中访问，

var props = {
    prop1: "PropContent"
}

<SinglePost {...props} />