02-Taro页面编写和传值

最新推荐文章于 2025-03-23 18:15:35 发布

原创

最新推荐文章于 2025-03-23 18:15:35 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #前端

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

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: ''
  }
  render () {
    const { childName } = this.props
    return (
      <View>