react传值,路由

Posted 2023-04-18

参考技术A 1.父组件传值用num=this.state.变量名   子组件用this.props.变量名接受直接使用

1.子组件中引入 import PropTypes from 'prop-types'  

2.子组件中使用

    // 限制传值过来的类型

    static propTypes = 

        num: PropTypes.number

    

3.// 当父组件中没有传值的时候下面就是给定的默认值

    static defaultProps = 

        num: 88

    

import React,  Component  from 'react'

// 子组件

class Child extends Component 

    state = 

        num: 20

    

    render() 

        return (

            <>

                <h1>this.state.num</h1>

                <button onClick=this.btnClick.bind(this)>子传父</button>

            </>

        )

    

    btnClick() 

    



export default class App13 extends Component 

    render() 

        return (

            <div>

            </div>

        )

    

    getChildNum(val) 

        console.log(val);

    



1. 在父组件中，声明数据类型和值

            1.1 声明上下文数据类型

                static childContextTypes =

                    数据名: PropTypes.数据类型

               

            1.2 向上下文控件中存值

                getChildContext()

                    return

                    数据: 值

                   

               

    2. 在“无论哪一级别”子组件中，只需声明需要的全局上下文数据，就可自动注入子组件的context属性中

        static contextTypes =

            数据名: 数据类型

       

        或是：

        static contextTypes =

            数据名: PropTypes.数据类型

       

        在子组件中使用：

            this.context.con

1.组件中表单元素的value值受组件的state数据控制，并且该表单元素有onChange事件，我们可以在事件中对该表单做实时验证，验证值是否合法然后做相应的操作(推荐)

2. 组件中表单元素没有写value值，与state数据无关，不受组件管理

1.安装:npminstallreact-router-dom --save-dev

(包括传参)

react的路由以及传值方法

1.下载路由

npm i router-react-dom --S

2.引入

import {Link,Route} from ‘react-router-dom‘

3.使用Link标签

 <Link to=‘/‘>Home</Link>

4.路由展示

exact 精准匹配路由

component={Home}  指定js文件

path={"/"} url路由地址

<Route path={"/"} exact component={Home}></Route>

传值

1.params的路由传值

配置路由

const id = 123;

配置直接在路由拼接变量id

<Link to={‘/about/‘+id+‘/‘+name}>About</Link>

在展示区域添加/:id

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

在展示的js里使用

this.props.match.params.id

接收

params特点

1.需要路由配置

2.刷新网页值还存在

3.如果传参数过多,url网址太长

 

2.query传值不需要配置路由

在路由上添加

pathname:‘/mine‘路由地址

query:obj对象形式传值

<Link to={{pathname:‘/mine‘,query:obj}}>Mine</Link>

 在子展示页面使用

this.props.location.query

接收

this.props.location.query.id

query的特点

1.不需要配置路由

2.刷新网页值被销毁

3.可以传对象

          网页销毁后可以,存入

　　　　　　　　　localstroge.setItme()或者sessionstorage.setItme()进行存储,

　　　　　　　　   刷新可以从localstroge或者sessionstorage中获取

3.state方式传值

state传值和query方式基本一样把其中的所有的query全部换成state就可以

在路由上添加

pathname:‘/mine‘路由地址

state:obj对象形式传值

<Link to={{pathname:‘/mine‘,state:obj}}>Mine</Link>

 在子展示页面使用

this.props.location.state

接收

this.props.location.state.id

 

params的特点

1.不需要配置路由

2.刷新网页值不会被销毁

3.可以传对象

　　　　刷新不会网页值不会被销毁,

然而重新输入当前网址,网页的值会被销毁

query和state不会再url上显示,类似于post

params会在url上显示,类似于get