您现在的位置是：网站首页> 编程资料编程资料

利用React实现一个有点意思的电梯小程序_React_

2023-05-24 400人已围观

简介利用React实现一个有点意思的电梯小程序_React_

查看效果

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

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

技术栈介绍

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

初始化项目

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

mkdir react-elevator

创建一个目录，创建好之后，接着我们在vscode中打开这个目录，打开之后，在vscode中打开终端，输入以下命令:

npm init vite@latest react-elevator -- --template react-ts

注意在命令界面，我们要选择react,react-ts。初始化项目好了之后，我们在输入命令:

cd react-elevator npm install npm run dev

查看一下我们初始化项目是否成功。

特别声明: 请注意安装了node.js和npm工具

css in js

可以看到，我们的项目初始化已经完成，好，接下来，我们还要额外的装一些项目当中遇到的依赖，例如css in js,我们需要安装@emotion/styled,@emotion/react依赖。继续输入命令:

npm install @emotion/styled @emotion/react --save-dev

安装好之后，我们在项目里面使用一下该语法。

首先引入styled,如下:

import styled from "@emotion/styled"

接着创建一个样式组件，css in js实际上就是把每个组件当成一个样式组件，我们可以通过styled后面跟html标签名，然后再跟模板字符串，结构如下:

const <组件名> = styled.` //这里写样式代码 `

例如:

const Link = styled.a` color:#fff; `

以上代码就是写一个字体颜色为白色的超链接组件，然后我们就可以在jsx当中直接写link组件。如下所示:

这是一个超链接组件

当然emotion还支持对象写法，但是我们这里基本上只用模板字符串语法就够了。

接下来步入正题，我们首先删除初始化的一些代码，因为我们没有必要用到。

分析程序的结构

好删除之后，我们接下来看一下我们要实现的电梯小程序的结构:

1.电梯井（也就是电梯上升或者下降的地方）

2.电梯

3.电梯门（分为左右门）

4.楼层

4.1 楼层数
4.2 楼层按钮（包含上升和下降按钮）

结构好了之后，接下来我们来看看有哪些功能:

点击楼层，催动电梯上升或者下降
电梯到达对应楼层，电梯左右门打开
门打开之后，里面的美女就出来啦
按钮会有一个点击选中的效果

我们先来分析结构，根据以上的拆分，我们可以大致将整个小程序分成如下几个组件:

1.楼房（容器组件）

2.电梯井组件

2.1 电梯组件

2.1.1 电梯左边的门

2.1.1 电梯右边的门

3.楼层组件

3.1 楼层控制组件

3.1.1 楼层上升按钮组件

3.1.2 楼层下降按钮组件

3.2 楼层数组件

我们先来写好组件和样式，然后再完成功能。

楼房组件

首先是我们的楼房组件，我们新建一个components目录，再新建一个ElevatorBuild.tsx组件，里面写上如下代码:

import styled from "@emotion/styled" const StyleBuild = styled.div` width: 350px; max-width: 100%; min-height: 500px; border: 6px solid var(--elevatorBorderColor--); overflow: hidden; display: flex; margin: 3vh auto; ` const ElevatorBuild = () => { return (  ) } export default ElevatorBuild

这样，我们的一个楼房组件就算是完成了，然后我们在App.tsx当中引入，并使用它:

//这里是新增的代码 import ElevatorBuild from "./components/ElevatorBuild" const App = () => (  {/*这里是新增的代码 */} 
 ) export default App

全局样式

在这里，我们定义了全局css变量样式，因此在当前目录下创建global.css，并在main.tsx中引入，然后在该样式文件中写上如下代码:

:root { --elevatorBorderColor--: rgba(0,0,0.85); --elevatorBtnBgColor--: #fff; --elevatorBtnBgDisabledColor--: #898989; --elevatorBtnDisabledColor--: #c2c3c4; } * { margin: 0; padding: 0; box-sizing: border-box; }

电梯井组件

接下来，让我们继续完成电梯井组件，同样在components目录下新建一个ElevatorShaft.tsx组件，里面写上如下代码:

import styled from "@emotion/styled" const StyleShaft = styled.div` width: 200px; position: relative; border-right: 2px solid var(--elevatorBorderColor--); padding: 1px; ` const ElevatorShaft = () => { return (  ) } export default ElevatorShaft

然后我们在楼房组件中引入并使用它,如下所示:

import styled from "@emotion/styled" //这里是新增的代码 import ElevatorShaft from "./ElevatorShaft" const StyleBuild = styled.div` width: 350px; max-width: 100%; min-height: 500px; border: 6px solid var(--elevatorBorderColor--); overflow: hidden; display: flex; margin: 3vh auto; ` const ElevatorBuild = () => { return (  {/*这里是新增的代码 */}  ) } export default ElevatorBuild

电梯门组件

接着我们来完成电梯门组件，我们可以看到电梯门组件有一些公共的样式部分，所以我们可以抽取出来，新建一个Door.tsx,写上如下代码:

import styled from '@emotion/styled'; const StyleDoor = styled.div` width:50%; position: absolute; top: 0; height: 100%; background-color: var(--elevatorBorderColor--); border: 1px solid var(--elevatorBtnBgColor--); `; const StyleLeftDoor = styled(StyleDoor)` left: 0; `; const StyleRightDoor = styled(StyleDoor)` right: 0; `; export { StyleLeftDoor,StyleRightDoor }

由于我们功能会需要设置这两个组件的样式，并且我们这个样式是设置在style属性上的，因此我们可以通过props来传递，现在我们先写好typescript接口类，创建一个type目录，新建style.d.ts全局接口文件，并写上如下代码:

export interface StyleProps { style: CSSProperties }

电梯组件

接下来，我们就可以开始写电梯组件，如下所示:

import styled from "@emotion/styled" const StyleElevator = styled.div` height: 98px; background: url("https://www.eveningwater.com/my-web-projects/js/26/img/6.jpg") center / cover no-repeat; border: 1px solid var(--elevatorBorderColor--); width: calc(100% - 2px); padding: 1px; transition-timing-function: ease-in-out; position: absolute; left: 1px; bottom: 1px; ` const Elevator = (props: Partial) => { return (  ) } export default Elevator

接下来，我们来看两个电梯门组件，首先是左边的门，如下所示:

import { StyleProps } from "../type/style" import { StyleLeftDoor } from "./Door" const ElevatorLeftDoor = (props: Partial) => { const { style } = props return (  ) } export default ElevatorLeftDoor

Partial是一个泛型，传入接口，代表将接口的每个属性变成可选属性，根据这个原理，我们可以得知右边门的组件代码也很类似。如下:

import { StyleProps } from '../type/style'; import { StyleRightDoor } from './Door' const ElevatorRightDoor = (props: Partial) => { const { style } = props; return (  ) } export default ElevatorRightDoor;

这两个组件写好之后，我们接下来要在电梯组件里引入并使用它们，由于功能逻辑会需要设置样式，因此，我们通过props再次传递style。如下所示:

import styled from "@emotion/styled" import { StyleProps } from "../type/style"; import ElevatorLeftDoor from "./ElevatorLeftDoor" import ElevatorRightDoor from "./ElevatorRightDoor" const StyleElevator = styled.div` height: 98px; background: url("https://www.eveningwater.com/my-web-projects/js/26/img/6.jpg") center / cover no-repeat; border: 1px solid var(--elevatorBorderColor--); width: calc(100% - 2px); padding: 1px; transition-timing-function: ease-in-out; position: absolute; left: 1px; bottom: 1px; ` export interface ElevatorProps { leftDoorStyle: StyleProps['style']; rightDoorStyle: StyleProps['style']; } const Elevator = (props: Partial) => { const { leftDoorStyle,rightDoorStyle } = props; return (  ) } export default Elevator

完成了电梯组件之后，接下来我们在电梯井组件里面引入电梯组件，注意这里后续逻辑我们会设置电梯组件和电梯门组件的样式，因此在电梯井组件中，我们需要通过props传递样式。

import styled from "@emotion/styled" import { StyleProps } from "../type/style"; import Elevator from "./Elevator" const StyleShaft = styled.div` width: 200px; position: relative; border-right: 2px solid var(--elevatorBorderColor--); padding: 1px; ` export interface ElevatorProps { leftDoorStyle: StyleProps['style']; rightDoorStyle: StyleProps['style']; elevatorStyle: StyleProps['style']; } const ElevatorShaft = (props: Partial) => { const { leftDoorStyle,rightDoorStyle,elevatorStyle } = props; return (  ) } export default ElevatorShaft

电梯门组件的开启动画

我们可以看到，当到达一定时间，电梯门会有开启动画，这里我们显然没有加上，所以我们可以为电梯门各自加一个是否开启的props用来传递，继续修改Door.tsx如下:

import styled from '@emotion/styled'; const StyleDoor = styled.div` width:50%; position: absolute; top: 0; height: 100%; background-color: var(--elevatorBorderColor--); border: 1
                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：el-table 行合并的实现示例_vue.js_
                                                                下一篇：解决el-tree数据回显时子节点部分选中父节点都全选中的坑_vue.js_