如何用React开发一款有趣的电梯运行互动小程序？

本文共计6213个文字，预计阅读时间需要25分钟。

目录+查看效果+技术栈介绍+初始化项目+CSS in JS+分析程序结构+楼梯组件+全局样式+电梯组件+电梯门组件+电梯门组件+电梯启动动画+修改电梯和电梯门组件+楼层容器组件+楼层

目录

• 查看效果
• 技术栈介绍
• 初始化项目
• css in js
• 分析程序的结构
• 楼房组件
• 全局样式
• 电梯井组件
• 电梯门组件
• 电梯组件
• 电梯门组件的开启动画
• 修改电梯和电梯井组件
• 楼层容器组件
• 楼层组件
• 楼层数
• 楼层的上升与下降
• 楼层列表渲染
• 楼层按钮组件
• 修改楼层容器组件
• 最后

查看效果

我们先来看一下今天要实现的示例的效果，如下所示

好，接下来我们也看到了这个示例的效果，让我们进入正题，开始愉快的编码吧。

技术栈介绍

这个小程序，我们将采用React + typescript + css in js语法编写,并且采用最新比较流行的工具vite来构建。

初始化项目

我们可以选择在电脑按住shift,然后右键，选择powershell，也就是默认的系统终端。