zoukankan      html  css  js  c++  java
  • 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>
            )
        }
     
  • 相关阅读:
    Debian9 升级至 Debian10
    FastApi学习(二)
    FastApi学习(一)
    uber_go_guide解析(三)(规范)
    uber_go_guide解析(二)
    uber_go_guide解析(一)
    Docker踩过的坑
    Goland 设置代码格式化
    Nginx集成Naxsi防火墙
    ubuntu14中配置tomcat8
  • 原文地址:https://www.cnblogs.com/zxiaoyu/p/14336094.html
Copyright © 2011-2022 走看看