React传递数据的方式

1:属性传值  props

2:函数传值

父组件定义函数,子组件接受将数据作为函数参数回调给父组件

3,useLocation传值

01:query钩子传值

<li><NavLink to={{pathname:'/home',query: 'aaa'}} activeStyle={{fontSize:'30px'}}>首页</NavLink></li>

02:state钩子传值:

<li><NavLink to={{pathname:'/list',state:'bbb'}} activeStyle={{fontSize:'30px'}}>列表页</NavLink></li>

03:srarch传值:(解析比较麻烦,地址栏后面?a=1&b=2,需要url转化为json)

<li><NavLink to="/myself?a=1&b=2" activeStyle={{fontSize:'30px'}}>我的</NavLink></li>
//url to json:
var json={}
var arr =str.substring(1).split('&')//去掉问号,将字符串按照&分割开成一个数组
 for(var i=0,i<arr.length,i++){//循环数组
     var arr2=arr[i].split('=')//将数组中的每一项按=号分割开
     json[arr[0]]=arr[1]
}

4:useRoutMatch传值(url,parh,params)

01:利用params属性传值,只能在动态路由中使用

 <li><NavLink to={`${url}/demo/13`}>dom1</NavLink></li>

   <Route path={`${path}/demo/:id`}>

       <Demo></Demo>

   </Route>
let Demo=()=>{ 
    let {url,path,params}=useRouteMatch();   
    console.log('params',params)  
    return (
        <div><h2>我是demo页{params.id}</h2></div>
    )};

5:contextAPi/useContext(可全局多层嵌套组件数据传递,类似于vue中vuex的数据)

contextAPI是class类组件用的传递数据的方式

1:调用该钩子函数可得到两个参数

import {Component,createContext} from 'react' //引入创建上下文函数
///Provider 状态的提供者 设置状态的//Consumer 使用状态的let {Provider,Consumer}=createContext();

2创建一个数据仓库

class ProviderComponent extends Component{    constructor(){        super();        this.state={a:1,b:2};    }    changeDataA=v=>{        this.setState({            a:v        })    }    render(){        return (            <Provider value={{//Provider 数据提供的标签,value为全局可使用的数据                    data:this.state,// 全局可使用的satae中的数据                    fn:this.changeDataA //更改数据的函数                }}>                {this.props.children} //占位符,如果组件中有嵌套标签,放在这里            </Provider>        )    }}

3使用数据库中的数据

class Demo2 extends Component{
    render(){
        return (
            <div>
                <Consumer>//状态中数据的使用标签
                    {   //花括号放置变量
                        (val)=>{ //回调函数,形参val即全局可使用的data数据
                            return(
                               <div>
                                   <h4>我是最小的</h4>
                                   <span>数据：{val.data.a}</span>
                                   <button onClick={
                                       ()=>{//回调全局数据中设置数据的函数
                                           val.fn(val.data.a+1);
                                       }
                                   }>点击</button>
                               </div>
                            )
                        }
                    }
                </Consumer>
            </div>
        )
    }}
class Demo1 extends Component{
    render(){
        return (
            <div>
                <h3>我是子组件</h3>
                <Consumer>//数据的使用者
                    { 
                       (val)=>{ 
                           return (
                                <div>{val.data.a}</div>
                            )
                        }
                    }
                </Consumer>
                <Demo2></Demo2> //子组件中在嵌套组件demo2
            </div>
        )
    }
}

4导出父组件

export default class App extends Component{
    constructor(){super()}
    render(){
        return(
            <ProviderComponent> //仓库标签包裹整个组件
                <div>
                    <h1>我是父组件</h1>
                    <Demo1/> //嵌套子组件
                </div>
            </ProviderComponent>
        )
    }
}

useContext是函数式组件传递数据的方式

1基础函数式组件是没有contextApi的.hook诞生后产生了useContext方法

用法:

01引入useContext+useState+useContext组件

import {createContext,useContext,useState} from 'react'

02调用格式化上下文

let Context=createContext();
//{Provider,Consumer},没有解构赋值Context.Provider,一样指向状态的提供者

03定义主组件并初始化数据

export default function () {
    let [a,setA]=useState(0);//给数据设定初始值,并申明更改数据的方法
    return(
        <Context.Provider value={{a,setA}}> //类似于contextAPi中Provider,状态的提供者
            <div>
                <p>我是父组件</p>
                <Demo></Demo>//嵌套子组件demo
            </div>
        </Context.Provider>
    )
}

04子组件中使用全局数据

let Demo=()=>{
    let data=useContext(Context) //类似于Consumer,数据状态的使用者,必须在组件类申明才能调用数据
    return(
        <div>
            <p>我是子组件</p>
            <span>{data.a}</span>//调用全局数据中的a
            <Demo2></Demo2>
        </div>
    )
};

05子组件中嵌套组件

let Demo2=()=>{
    let data=useContext(Context) //类似于Consumer,数据状态的使用者,必须在组件类申明才能调用数据
    return (
        <div>
            <div>
                <p>我是小组件</p>
                <button onClick={
                    ()=>{//调用数据中设置数据的方法
                        data.setA(data.a+1);
                    }
                }>点击修改</button>
                <span>{data.a}</span> //映射全局数据
            </div>
        </div>
    )
}