您现在的位置是:主页 > Web前端技术 > Web前端技术
React怎么构建小程序移动开发
IDCBT2021-12-24【服务器技术】人已围观
简介这篇文章主要介绍“React怎么构建小程序”,在日常操作中,相信很多人在React怎么构建小程序问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”
这篇文章主要介绍“React怎么构建小程序”,在日常操作中,相信很多人在React怎么构建小程序问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”React怎么构建小程序”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
项目描述
为了更清晰描述实现过程,我们把实现方案当作一个项目来对待。
项目需求:使如下计数器功能的 React 代码运行到微信小程序平台。
import React, { Component } from 'react' import { View, Text, Button } from '@leo/components' import './index.css' export default class Index extends Component { constructor() { super() this.state = { count: 0 } this.onAddClick = this.onAddClick.bind(this) this.onReduceClick = this.onReduceClick.bind(this) } componentDidMount () { console.log('执行componentDidMount') this.setState({ count: 1 }) } onAddClick() { this.setState({ count: this.state.count + 1 }) } onReduceClick() { this.setState({ count: this.state.count - 1 }) } render () { const text = this.state.count % 2 === 0 ? '偶数' : '奇数' return ( <View className="container"> <View className="conut"> <Text>count: {this.state.count}</Text> </View> <View> <Text className="text">{text}</Text> </View> <Button onClick={this.onAddClick} className="btn">+1</Button> <Button onClick={this.onReduceClick} className="btn">-1</Button> </View> ) } }
如果使用过 Taro 或者 Remax 等框架,对上述代码应该有似曾相识的感觉,上述代码正式模仿这类框架的 React DSL 写法。如果想迫切看到实现这个需求的效果,可点击此项目源码进行获取源码,然后根据提示运行项目,即可观察到如下效果:
标签:很赞哦! ()