React 列表页面传递参数

React 列表进入详情页面

首先安装 react-router-dom (4.0) npm/yarn install react-router-dom

路由跳转配置

列表 父组件 this.props.history.push( { pathname:‘/detail’, state: data } )

上述的data 为明细的数据

那么详情页面如何接收父组件的数据呢？

const detaildata = this.prop.location.stata.data

注意如果 父组件进入详情页面 this.props.history.push();这个报错时. 引入 import { withRouter } from ‘react-router’即可。

部分代码如下

列表组件

import React, { Component } from ‘react’

import { withRouter } from ‘react-router’;
export class  List extends Component {


constructor(props) {<br/>
    super(props);<br/>
    this.state={<br/>
        list: [<br/>
            {


“author”: “acemarke”,


                &#34;points&#34;: 125,<br/>
                &#34;story_text&#34;: null,<br/>
                &#34;comment_text&#34;: null,<br/>
                &#34;num_comments&#34;: 32,<br/>
                &#34;story_id&#34;: null,<br/>
                &#34;story_title&#34;: null,<br/>
                &#34;story_url&#34;: null,<br/>
                &#34;parent_id&#34;: null,<br/>
                &#34;created_at_i&#34;: 1460737187,<br/>
                &#34;relevancy_score&#34;: 6666<br/>
            },<br/>
            {


“author”: “jlongster”,


                &#34;points&#34;: 124,<br/>
                &#34;story_text&#34;: null,<br/>
                &#34;comment_text&#34;: null,<br/>
                &#34;num_comments&#34;: 54,<br/>
                &#34;story_id&#34;: null,<br/>
                &#34;story_title&#34;: null,<br/>
                &#34;story_url&#34;: null,<br/>
                &#34;parent_id&#34;: null,<br/>
                &#34;created_at_i&#34;: 1448479344,<br/>
                &#34;relevancy_score&#34;: 6397<br/>
            },<br/>
            {


“author”: “myth_drannon”,


                &#34;points&#34;: 123,<br/>
                &#34;story_text&#34;: null,<br/>
                &#34;comment_text&#34;: null,<br/>
                &#34;num_comments&#34;: 78,<br/>
                &#34;story_id&#34;: null,<br/>
                &#34;story_title&#34;: null,<br/>
                &#34;story_url&#34;: null,<br/>
                &#34;parent_id&#34;: null,<br/>
                &#34;created_at_i&#34;: 1499396674,<br/>
                &#34;relevancy_score&#34;: 7526<br/>
            }]<br/>
    }<br/>
 }


viewdetail (item)  {


    this.props.history.push({ pathname: &#39;/detail&#39;, state: {data:item} })<br/>
}<br/>
render() {<br/>
    return (<br/>
        &lt;div&gt;<br/>
            {ths.state.list.map(item =&gt; {<br/>
                return (<br/>
                        &lt;div key={item.points} onClick={ ()=&gt;this.viewdetail(item)} &gt;<br/>
                            &lt;span&gt;{item.author}&lt;/span&gt;<br/>
                            &lt;span&gt;{item.num_comments}&lt;/span&gt;<br/>
                            &lt;span&gt;{item.points}&lt;/span&gt;<br/>
                        &lt;/div&gt;<br/>
                )<br/>
            })}<br/>
        &lt;/div&gt;<br/>
    )<br/>
}<br/>


}
export default withRouter(List)

详情页面

import React, { Component } from ‘react’
export class DetailList extends Component {


constructor(props) {<br/>
    super(props)<br/>
     const data = this.props.location.state.data;<br/>
    this.state={<br/>
        data:data<br/>
    }<br/>
}


render() {


    return (<br/>
        &lt;div&gt;<br/>
            &lt;List&gt;<br/>
                &lt;div&gt;<br/>
                    {this.state.data.author}<br/>
                &lt;/div&gt;<br/>
            &lt;/List&gt;<br/>
        &lt;/div &gt;<br/>
    )<br/>
}<br/>


}
export default DetailList