title: Text

sidebar_label: Text

文本

属性

属性名 类型 默认值 说明
selectable Boolean false 文本是否可选
space Boolean false 显示连续空格
decode Boolean false 是否解码

各端支持度

属性 微信小程序 H5 ReactNative 百度小程序 支付宝小程序 字节跳动小程序
selectable
space
decode
示例:
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text, Button } from '@tarojs/components'
  3. export default class PageView extends Component {
  4. state = {
  5. contents: [],
  6. contentsLen: 0
  7. }
  8. add = () => {
  9. this.setState(prev => {
  10. const cot = prev.contents.slice()
  11. cot.push({ text: 'hello world' })
  12. return {
  13. contents: cot,
  14. contentsLen: cot.length
  15. }
  16. })
  17. }
  18. remove = () => {
  19. this.setState(prev => {
  20. const cot = prev.contents.slice()
  21. cot.pop()
  22. return {
  23. contents: cot,
  24. contentsLen: cot.length
  25. }
  26. })
  27. }
  28. render () {
  29. return (
  30. <View className='container'>
  31. {this.state.contents.map((item, index) => (
  32. <Text key={index}>{item.text}</Text>
  33. ))}
  34. <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
  35. <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
  36. </View>
  37. )
  38. }
  39. }