02-Taro页面编写和传值

最新推荐文章于 2023-06-19 17:57:26 发布

页面仔小杨

最新推荐文章于 2023-06-19 17:57:26 发布

阅读量2.5k

点赞数

分类专栏：小程序开发文章标签：小程序前端

本文链接：https://blog.youkuaiyun.com/itxing666/article/details/106138411

版权

本文介绍了Taro页面的编写和传值过程，包括State局部状态管理、组件编写与传值、页面跳转和参数传递、请求远程数据以及需要注意的事项。同时，提到了在不同端如微信小程序、百度小程序和H5中如何处理多端组件。此外，建议在开发过程中避免在componentDidMount中使用this.setState，并给出了Taro项目的实战链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

02-Taro页面编写和传值

上回说到Taro打造hello-world应用。废话不多说，直接上肉菜

State局部状态

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }
  state = {
    name: "hello 前端骚年"
  }
  render () {
    const { name } = this.state
    return (
      <View className='index'>
        <Text>{name}</Text>
      </View>
    )
  }
}

组件编写和传值

mkdir -p src/components/child
cd src/components/child
touch index.jsx

编写组件，代码如下

import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'
export default class Child extends Component {
  propTypes = {
    childName: PropTypes.string
  }
  defaultProps = {
    childName: