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>
    )
  }
}

 

转载于:https://www.cnblogs.com/cap-rq/p/10910729.html

Logo

智屏生态联盟致力于大屏生态发展,利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐