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>
        )
      }
    }
  • 相关阅读:
    ios webview调试
    iOS与网页JS交互,看我就够了
    iOS开发工具-网络封包分析工具Charles
    使用 Charles 抓取 App 网络请求
    用css解决table文字溢出控制td显示字数
    Docker容器学习与分享03
    Docker容器学习与分享02
    Docker容器学习与分享01
    写在重新更新之前
    Kali学习笔记30:身份认证与命令执行漏洞
  • 原文地址:https://www.cnblogs.com/cap-rq/p/10910729.html
Copyright © 2011-2022 走看看