Taro ( react ) 中 的传参 , 和 父子 组件通讯 数据通讯

Taro 中 跳转的方式 和 微信 小程序的跳转方式, 几乎一致

关于跳转携带参数的问题

Taro.navigateTo({
   url: '/pages/index/index?id=1&age=18' 
})

// 在 index 中 获取地址栏中携带过来的参数

// 直接在生命周期函数
componentDidMount() {
  console.log(this.$router.params)   
}

// 打印的结果是一个对象, 通过点的形式 就能拿到对象的内容

 

通讯  ==>  父 组件 向 子 组件 传参(2步走)

//父组件中
import React, { Component } from "react";
import Child from "./Child";

class Dad extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr:["暴富","暴瘦"],
        }
    }

    render() {
        return (
            <div>
            //写在子组件的属性中
                <Child arr={this.state.arr}></Child>   // 1. 在父组件 定义子组件的地方, 绑定数据源
            </div>
        )
    }
}

export default Dad;

//子组件中
import React, { Component } from "react";

class Child extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
           <div>
               <ul>
                   {
                       //再用props获取
                       this.props.arr.map(el=>{   //  2. 在子组件中 直接就能通过 this.props.arr 的形式拿到父组件传递过来的参数
                           return (
                               <li key={el}>{el}</li>
                           )
                       })
                   }
               </ul>
           </div>
        )
    }
}

export default Child;

通讯  ==>  子 组件 向 父 组件 传参(3步走)

//父组件
import React, { Component } from "react";
import Child from "./Child";

class Dad extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    fn=(data)=>{
        this.setState({   // 3. 通过 回调函数的形式, 就能 拿到 子组件 传递过来的 参数
            txt:data
        })
    }

    render() {
        return (
            <div>
                <Child cfn={this.fn}></Child>  // 在父组件使用子组件的地方, 把cfn当 原生 的事件使用, 并且给一个 回调函数
            </div>
        )
    }
}

export default Dad;

//子组件
import React, { Component } from "react";

class Child extends Component {
    constructor(props){
        super(props);
    }

    fn=(data)=>{
        this.props.cfn(data);   // 1. 通过this.props.cfn()  出发父组件 中 的函数
    }

    render() {
        return (
           <div>
            //通过事件进行传值
               <button onClick={()=>{this.fn("我是儿子")}}>子组件向父组件传值</button>
           </div>
        )
    }
}

export default Child;

 

通讯  ==>  父 组件 触发 子 组件 中的函数 (4步走)

//父组件
import React, { Component } from "react";
import Child from "./Child";

class Dad extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr:["暴富","暴瘦"],
            txt:"我是尼爸爸"
        }
    }

    onRef=(ref)=>{
        this.Child=ref;   // 1. 把当前组件的指向, 指向 该组件内部(子组件), 而不是 当前所在的react组件中,
    }

    click=()=>{
        this.Child.childFn();   // 2. 通过某一时机, 通过 this.Child. 函数名的形式. 触发 子组件 中的 函数
    }

    render() {
        return (
            <div>
                <Child onRef={this.onRef}></Child>
                <button onClick={this.click}>父组件调用子组件中的方法</button>
            </div>
        )
    }
}

export default Dad;

//子组件
import React, { Component } from "react";

class Child extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount() {
        this.props.onRef(this)　　　　// 3. 子组件在创建之初, 就把 onRef 的指向,改变成 指向 当前的this
    }

    childFn=()=>{　　　　　　　　// 4. 子组件 直接 写 对应函数名的函数 即可
        console.log("我是子组件中的方法")
    }

    render() {
        return (
           <div>
           </div>
        )
    }
}

export default Child;

 

 

通讯  ==>  子 组件 触发 父 组件 中的函数 (4步走)

//父组件
import React, { Component } from "react";
import Child from "./Child";

class Dad extends Component {
    constructor(props) {
        super(props);
        this.state = {
            txt:"我是尼爸爸"
        }
    }

    fn=(data)=>{　　　　// 3. 回调函数 就是 子组件 触发 的 父组件 中的 事件
        this.setState({
            txt:data
        })
    }

    render() {
        return (
            <div>
                <Child cfn={this.fn}></Child>    // 2. 父组件中 把 cfn 当成 原生 的函数, 直接接收一个回调
                <p>{this.state.txt}</p>
            </div>
        )
    }
}

export default Dad;

//子组件
import React, { Component } from "react";

class Child extends Component {
    constructor(props){
        super(props);
    }

    fn=(data)=>{
        this.props.cfn(data);  // 1. 子组件 直接在某个时机触发下, 通过 this.props.cfn 触发父组件中的函数 cfn
    }

    render() {
        return (
           <div>
            //通过事件进行传值
               <button onClick={()=>{this.fn("我是儿子")}}>子组件向父组件传值</button>
           </div>
        )
    }
}

export default Child;

值得一提的是 , 在 Taro 框架中,  事件必须要 以 on 开头, 然后以大写字母开头, 所以上面的自定义事件, 一定是这种格式的

onFn  onCfn  onHandle , 不然 taro 框架 也 无法解析 , 跨组件触发事件的问题