React get传值

66 阅读 0 评论 44 点赞

我是靠谱客的博主精明未来，最近开发中收集的这篇文章主要介绍React get传值，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

此处用到的url模块，当然方法有很多，也可以用其他方法。

1.列表页

 <Link to={`/getdata?uid=${item.uid}`}>{item.name}</Link>

完整案例
传输值页面

import React, {Component} from 'react';
import '../assets/css/Cty.less'
import { Link } from "react-router-dom";

class Cty extends Component{
    constructor(props){
        super(props)
        this.state ={
           list:[
              {
                name:'主页',
                uid:'1'
             },
             {
                name:'热点',
                uid:'2'
             },
             {
                name:'常规',
                uid:'3'
             },
             {
                name:'遇见',
                uid:'4'
             },
             
           ],
        }
    }
    render(){
        return(
            <div className='cty'>
               <h2>我是cty</h2>
                <div className="cty_list1">
                    {
                        this.state.list.map((item,key) => {
                            return (
                                <span key={key}>
                                    <Link to={`/getdata?uid=${item.uid}`}>{item.name}</Link>
                                </span>
                             )
                         })
                    }
                </div>     
            </div>
        )
    }
}
export default Cty;

接收值得页面

import React,{Component} from 'react'
import url from 'url'          // 引入url 模块

class Getdata extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'getdata页面'
          };
    }
    // 页面加在完成
    componentDidMount(){
        let miu = url.parse(this.props.location.search,true);    // 解析地址
        console.log(miu.query);
    }
    render() {
        return (
           <div className='getdata'>
               {this.state.msg}
           </div> 
        );
    }
}

export default Getdata;

这样我们就完成了，如果对你有帮助，就点个赞吧！
如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！

在这里插入图片描述