zoukankan      html  css  js  c++  java
  • 每天一点点之 taro 框架开发

    1.调用组件

    组件文件

    import Taro, { Component } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    
    export default class Dialog extends Component {
      render () {          
        return (
          <View className='index'>
              我是弹窗组件
          </View>
        )
      }
    }

    调用

    import Taro, { Component } from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import Dialog from './dialog'
    export default class TestDialog extends Component {
      render () {          
        return (
          <View className='index'>
                <View>TestDialog</View>
                <Dialog></Dialog>
          </View>
        )
      }
    }

    2.向组件传值

    组件

    import Taro, { Component } from '@tarojs/taro'
    import { View, Text, Button } from '@tarojs/components'
    
    export default class Dialog extends Component {
      render () {          
        return (
          <View className='index'>
              我是弹窗组件
              {
                  this.props.children
              }
          </View>
        )
      }
    }

    调用

    import Taro, { Component } from '@tarojs/taro'
    import { View, Text, Button, Image } from '@tarojs/components'
    import Dialog from './dialog'
    export default class TestDialog extends Component {
      render () {          
        return (
          <View className='index'>
                {/* TestDialog */}
                <Dialog>
                    <Text>我是test传入的</Text>
                </Dialog>
                <Dialog>
                    <Image src={require('../../lib/img/二哈.jpg')}/>
                </Dialog> 
                <Dialog>
                    <Button>按钮</Button>
                </Dialog>
          </View>
        )
      }
    }

    注意:在组件中的 this.props.children 是只读的,不能进行更改

    3.向组件传递多个值

      由于组件接收的值不能更改,那么如果想要在组件接收多个值,就会出现问题,针对这种情况方案如下:

    在调用页面给组件名定义属性,在组件通过  this.props.myText 来接收值,代码如下:

    组件

    import Taro, { Component } from '@tarojs/taro'
    import { View, Text, Button } from '@tarojs/components'
    
    export default class Dialog extends Component {
      render () {          
        return (
          <View className='index'>
              我是弹窗组件
              { this.props.myText }
              {
                  this.props.children
              }
          </View>
        )
      }
    }

    调用

    import Taro, { Component } from '@tarojs/taro'
    import { View, Text, Button, Image } from '@tarojs/components'
    import Dialog from './dialog'
    export default class TestDialog extends Component {
      render () {          
        return (
          <View className='index'>
                {/* TestDialog */}
                <Dialog myText={<Text>我是myText传入的</Text>}>
                    <Text>我是test传入的</Text>
                </Dialog>
                <Dialog>
                    <Image src={require('../../lib/img/二哈.jpg')}/>
                </Dialog> 
                <Dialog>
                    <Button>按钮</Button>
                </Dialog>
          </View>
        )
      }
    }
  • 相关阅读:
    批处理命令之实现修改环境变量的值
    【hihocoder 1304】搜索一·24点
    【hihocoder 1297】数论四·扩展欧几里德
    【hihocoder 1298】 数论五·欧拉函数
    【hihocoder 1303】模线性方程组
    C语言如何动态分配二维数组
    Istream中的函数
    string 与 char * 转换
    boost 系列 1:boost 直接使用
    glog功能介绍 一分钟 51CTO技术博客
  • 原文地址:https://www.cnblogs.com/cap-rq/p/10910729.html
Copyright © 2011-2022 走看看