怎么利用React实现一个电梯小程序

本篇内容介绍了“怎么利用React实现一个电梯小程序”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们先来看一下今天要实现的示例的效果，如下所示好，接下来我们也看到了这个示例的效果，让我们进入正题，开始愉快的编码吧。这个小程序，我们将采用React + typescript + css in js语法编写,并且采用最新比较流行的工具vite来构建。我们可以选择在电脑按住shift,然后右键，选择powershell，也就是默认的系统终端。然后输入命令:创建一个目录，创建好之后，接着我们在vscode中打开这个目录，打开之后，在vscode中打开终端，输入以下命令:注意在命令界面，我们要选择react,react-ts。初始化项目好了之后，我们在输入命令:查看一下我们初始化项目是否成功。特别声明: 请注意安装了node.js和npm工具可以看到，我们的项目初始化已经完成，好，接下来，我们还要额外的装一些项目当中遇到的依赖，例如css in js,我们需要安装@emotion/styled,@emotion/react依赖。继续输入命令:安装好之后，我们在项目里面使用一下该语法。首先引入styled,如下:接着创建一个样式组件，css in js实际上就是把每个组件当成一个样式组件，我们可以通过styled后面跟html标签名，然后再跟模板字符串，结构如下:例如:以上代码就是写一个字体颜色为白色的超链接组件，然后我们就可以在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组件，里面写上如下代码:这样，我们的一个楼房组件就算是完成了，然后我们在App.tsx当中引入，并使用它:在这里，我们定义了全局css变量样式，因此在当前目录下创建global.css，并在main.tsx中引入，然后在该样式文件中写上如下代码:接下来，让我们继续完成电梯井组件，同样在components目录下新建一个ElevatorShaft.tsx组件，里面写上如下代码:然后我们在楼房组件中引入并使用它,如下所示:接着我们来完成电梯门组件，我们可以看到电梯门组件有一些公共的样式部分，所以我们可以抽取出来，新建一个Door.tsx,写上如下代码:由于我们功能会需要设置这两个组件的样式，并且我们这个样式是设置在style属性上的，因此我们可以通过props来传递，现在我们先写好typescript接口类，创建一个type目录，新建style.d.ts全局接口文件，并写上如下代码:接下来，我们就可以开始写电梯组件，如下所示:接下来，我们来看两个电梯门组件，首先是左边的门，如下所示:Partial是一个泛型，传入接口，代表将接口的每个属性变成可选属性，根据这个原理，我们可以得知右边门的组件代码也很类似。如下:这两个组件写好之后，我们接下来要在电梯组件里引入并使用它们，由于功能逻辑会需要设置样式，因此，我们通过props再次传递style。如下所示:完成了电梯组件之后，接下来我们在电梯井组件里面引入电梯组件，注意这里后续逻辑我们会设置电梯组件和电梯门组件的样式，因此在电梯井组件中，我们需要通过props传递样式。我们可以看到，当到达一定时间，电梯门会有开启动画，这里我们显然没有加上，所以我们可以为电梯门各自加一个是否开启的props用来传递，继续修改Door.tsx如下:emotion语法可以通过函数来返回一个css属性，从而达到动态设置属性的目的，一对尖括号，其实也就是typescript中的泛型，代表是否传入toggle数据，接下来修改ElevatorLeftDoor.tsx和ElevatorRightDoor.tsx。如下:同样的我们也需要修改电梯组件和电梯井组件，如下所示:但是别忘了我们这里的电梯组件因为需要上升和下降，因此还需要设置样式，再次修改一下电梯组件的代码如下:到目前为止，我们的左半边部分已经完成了，接下来，我们来完成右半边部分的楼层数和控制按钮组件，我们的楼层是动态生成的，因此我们需要一个容器组件包裹起来，先写这个楼层容器组件，如下所示:可以看到楼层容器组件还是比较简单的，接下来我们来看楼层组件。如下所示:可以看到楼层组件的逻辑非常多，但其实一项一项的分析下来也并不难。接下来，我们在该容器组件中引入，并且将该组件在楼房组件中引入，就可以得到我们整个电梯小程序的结构了。在这里我们来一步一步的分免费云主机域名析楼层组件的逻辑，首先楼层是动态生成的，通过父组件传递，因此我们在props当中定义一个count，默认值是6，代表默认生成的楼层数。这也就是我们这行代码的意义:其次我们在对电梯进行上升和下降的时候，需要获取到每一层楼高，实际上也就是楼层容器元素的高度，如何获取DOM元素的实际高度？我们先想一下，如果是一个真实的DOM元素，我们只需要获取offsetHeight就行了，即:在react中，我们应该如何获取真实的DOM元素呢？利用ref属性，首先导入createRef方法，创建一个storeyRef,然后将该storeyRef绑定到组件容器元素上，即:然后我们就可以使用useEffect方法，也就是react hooks中的一个生命周期钩子函数，监听这个storeyRef，如果监听到了，就可以直接拿到dom元素，并且使用一个状态来存储高度值。即:接下来，我们来看楼层数的动态生成，我们知道在react中动态生成列表元素，实际上就是使用数组的map方法，因此我们要根据count来生成一个数组，在这里，我们可以生成一个key数组，但是由于我们要控制按钮的禁用，因此额外添加一个disabled属性，因此这也是以下代码的意义:这里涉及到一个模拟useComponentDidMount钩子函数，很简单，在hooks目录下新建一个useComponentDidMount.ts,然后写上如下代码:然后就是渲染楼层组件，如下:>是React.Fragment的一种写法，可以理解它就是一个占位标签，没有什么实际含义，storeyList默认值是undefined，因此需要加?代表可选链，这里包含了两个部分，第一个部分就是控制按钮，第二部分就是显示楼层数。实际上我们生成的元素数组中的key就是楼层数，这也是这行代码的意义:还有就是react在生成列表的时候，需要绑定一个key属性，方便虚拟DOM，diff算法的计算，这里不用多讲。接下来我们来看按钮组件的逻辑。按钮组件的逻辑包含三个部分:禁用效果点击使得电梯上升和下降选中效果我们知道最高楼的上升是无法上升的，所以需要禁用，同样的，底楼的下降也是需要禁用的,所以这两行代码就是这个意思:接下来还有一个条件，这个item.disabled其实主要是防止重复点击的问题，当然这并不是一个好的解决办法，但目前来说我们先这样做，定义一个type状态，代表是点击的上升还是下降:然后定义一个checked状态，代表当前按钮是否选中:需要注意的就是这里的判断:我们样式当中是添加了checked的，这个没什么好说的。然后，我们还需要缓存当前楼层是哪一楼，因为下次点击的时候，我们就需要根据当前楼层来计算，而不是重头开始。最后，就是我们的点击上升和下降逻辑，还是有点复杂的:该函数有三个参数，第一个代表当前楼层的key值，也就是楼层数，第二个代表当前楼的索引，注意索引和楼层数是不一样的，第三个就是点击的是上升还是下降。我们的第一个参数和第三个参数是用来设置按钮的选中效果，即:接下来，我们需要计算动画的执行时间，例如我们从第一层到第五层，如果按每秒到一层来计算，那么第一层到第五层就需要4s的时间，同理我们的偏移量就应该是每层楼高与需要移动的楼高在减去1。因此，计算需要移动的楼高我们是:注意我们是将事件抛给父组件的，因为我们的电梯组件和楼层容器组件在同一层级，只有这样，才能设置电梯组件的样式。即:然后这里的逻辑就是防止重复点击的代码，这并不是一个好的解决方式:好了，这个组件的分析就到此为止了，我们既然把事件抛给了父组件，因此我们还需要修改一下它的父组件StoreyZone.tsx的代码，如下:然后就是最后的ElevatorBuild.tsx组件的修改,如下:最后，我们来检查一下代码，看看还有没有什么可以优化的地方，可以看到我们的按钮禁用逻辑是可以复用的，我们再重新创建一个函数，即:到此为止，我们的一个电梯小程序就算是完成了，也不算是复杂，总结一下我们学到的知识点:css in js 我们使用的是@emotion这个库父子组件的通信，使用props操作DOM，使用ref组件内的状态通信，使用useState，以及如何修改状态，有两种方式钩子函数useEffect类名的操作与事件还有就是样式的设置React列表渲染typescript接口的定义，以及一些内置的类型“怎么利用React实现一个电梯小程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: SpringCloud OpenFeign怎么远程调用

这篇文章主要介绍“SpringCloudOpenFeign怎么远程调用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“SpringCloudOpenFeign怎么远程调用”文章能帮助大家解决问题。Feign makes …