每天一點點之 taro 框架開發 - 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>
    )
  }
}