Question

我有这样的路由器配置：

<Router history={browserHistory}>
    <Route path="/">
        <IndexRoute component={HomePageContainers} />
        <Route path="r/:subreddit_name" component={Subreddit} />
    </Route>
</Router>

HomePageContainers呈现如下：

render() {

    return (<div>
        <HomePage reddits={this.state.reddits} key={this.state.isLoaded && this.state.reddits.data.after} isLoaded={this.state.isLoaded} isScrolling={this.state.isScrolling} scrollFunc={this.onScroll.bind(this)} />
    </div>)
}

和HomePage渲染Reddits，如：

 <Col md={3} key={reddit.data.id}>
   <Reddits key={reddit.data.id} reddit={reddit}/><br/>
 </Col>

有一个Reddits类看起来像：

class Reddits extends React.Component {

    constructor(props){
        super(props);
    }

    render() {
        let reddit = this.props.reddit;
        return(
            <div id={styles.box}>
                <p>{reddit.data.title}</p>
                <Link to={reddit.data.url}>
                    <p>{reddit.data.url}</p>
                </Link>
            </div>
        )
    }
}

只要路径为r/:subreddit_name，Subreddit组件就会生效并且正常工作。在这里，我还将:subreddit_name值作为routeParams的一部分。但是，如果您查看Reddits课程，reddit.data会获得Subreddit的所有信息。

我想将reddit.data作为Route(r)的道具发送，是否可能？

Answer 1

您希望HomeComponenet将您的Reddit组件渲染为子项，如下所示：

<Route path='/home' component="HomeComponent">
  <Route path='/reddit' component="RedditComponent">
</Route>

要显示reddit组件，您需要在HomeComp：

中呈现子项

render() {
  { this.props.children }
}

现在你可以通过像这样的克隆孩子来传递道具：

HomeComp：

render() {
       {this.props.children && React.cloneElement(this.props.children, {
              someFunctionOrDataToPass: this.someFunctionOrDataToPass
            })}
    }

Here is another example

反应路由器发送道具

1 个答案: