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) {
        super(props);
        this.state={
            list: [
                {
                
                    "author": "acemarke",
                    "points": 125,
                    "story_text": null,
                    "comment_text": null,
                    "num_comments": 32,
                    "story_id": null,
                    "story_title": null,
                    "story_url": null,
                    "parent_id": null,
                    "created_at_i": 1460737187,
                    "relevancy_score": 6666 
                },
                {
                    
                    "author": "jlongster",
                    "points": 124,
                    "story_text": null,
                    "comment_text": null,
                    "num_comments": 54,
                    "story_id": null,
                    "story_title": null,
                    "story_url": null,
                    "parent_id": null,
                    "created_at_i": 1448479344,
                    "relevancy_score": 6397 
                },
                {
                
                    "author": "myth_drannon",
                    "points": 123,
                    "story_text": null,
                    "comment_text": null,
                    "num_comments": 78,
                    "story_id": null,
                    "story_title": null,
                    "story_url": null,
                    "parent_id": null,
                    "created_at_i": 1499396674,
                    "relevancy_score": 7526 
                }]
        }
     }

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

export default withRouter(List)

详情页面

import React, { Component } from 'react'
 

export class DetailList extends Component {
    constructor(props) {
        super(props)
         const data = this.props.location.state.data;
        this.state={
            data:data
        }
    }

    render() {
        return (
            <div>
                <List>
                    <div>
                        {this.state.data.author}    
                    </div>
                </List>
            </div >
        )
    }
}

export default DetailList

转载于:https://www.cnblogs.com/joexin/p/10567711.html