react taro 组件传值

1，父传子

父组件内引用子组件 

import NoData from "../myNeed/components/noData"; 

<NoData name="暂无推荐资金" />

子组件里面this.props接收值

 render() {

    const { name} = this.props;

    return (

      <View className="no-data">

        <Image src={empty} className="img" />

        <View className="text">

          {name}

        </View>

      </View>

    );

  }

 

2.子传父

父组件引用子组件，绑定函数

import Filter from "./components/filter";

 

 onConfirm(tabs, status) {// 这就是传过来的值

    console.log("confirmTabs", tabs); 

    console.log("confirmstatus", status);

  }

  onReset(tabs) {

    console.log("tabs", tabs);

  }

 

<Filter

          onConfirm={this.onConfirm.bind(this)}

          onReset={this.onReset.bind(this)}

        />

 

子组件

 

confirmBtn() {

   const { onConfirm } = this.props;

    onConfirm(‘值’,‘值’);

  }

 

 resetBtn() {

    const { onReset } = this.props;

    onReset(‘值’);

  }

           <View className="btn-reset" onClick={this.resetBtn.bind(this)}>

              重置

            </View>

            <View className="btn-confirm" onClick={this.confirmBtn.bind(this)}>

              确定

            </View>

 

 

3.路由传值

 

Taro.navigateTo({

          url: `/pages/financing-package/recommendAssetSuccess/index?id=${res.result}`

        });

 

跳转的页面接收值用this.$router.params

 render() {

        console.log('render-params',this.$router.params);

        const params=this.$router.params || {};

        return (

            <View className="center">

               <SuccessPage guideText='我的推荐'/>

                <View className="login-module">

                    <View className="btn" onClick={this.toDetail.bind(this,params.id)}>查看我的推荐资产</View>

                    <View className="btn-back" onClick={this.toHomePage.bind(this)}>返回首页</View>

                </View>

            </View>

        )

    }