每天一点点之 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> ) } }