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

第

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

export{StyleLeftDoor,StyleRightDoor}

emotion语法可以通过函数来返回一个css属性，从而达到动态设置属性的目的，一对尖括号，其实也就是typescript中的泛型，代表是否传入toggle数据，接下来修改ElevatorLeftDoor.tsx和ElevatorRightDoor.tsx。如下:

import{StyleProps}from../type/style;

import{StyleLeftDoor}from./Door

exportinterfaceElevatorLeftDoorPropsextendsStyleProps{

toggle:boolean

constElevatorLeftDoor=(props:PartialElevatorLeftDoorProps)={

const{style,toggle}=props;

return(

StyleLeftDoor

import{StyleProps}from../type/style

import{StyleRightDoor}from./Door

exportinterfaceElevatorRightDoorPropsextendsStyleProps{

toggle:boolean

constElevatorRightDoor=(props:PartialElevatorRightDoorProps)={

const{style,toggle}=props;

return(

StyleRightDoor

修改电梯和电梯井组件

同样的我们也需要修改电梯组件和电梯井组件，如下所示:

importstyledfrom@emotion/styled

import{StyleProps}from../type/style;

importElevatorLeftDoorfrom./ElevatorLeftDoor

importElevatorRightDoorfrom./ElevatorRightDoor

constStyleElevator=styled.div`

height:98px;

background:url(/my-web-projects/js/26/img/6.jpg)center/coverno-repeat;

border:1pxsolidvar(--elevatorBorderColor--);

width:calc(100%-2px);

padding:1px;

transition-timing-function:ease-in-out;

position:absolute;

left:1px;

bottom:1px;

exportinterfaceElevatorPropsextendsStyleProps{

leftDoorStyle:StyleProps[style]

rightDoorStyle:StyleProps[style]

leftToggle:boolean

rightToggle:boolean

constElevator=(props:PartialElevatorProps)={

const{leftDoorStyle,rightDoorStyle,leftToggle,rightToggle}=props;

return(

StyleElevator

ElevatorLeftDoor

importstyledfrom@emotion/styled;

import{StyleProps}from../type/style;

importElevatorfrom./Elevator;

constStyleShaft=styled.div`

width:200px;

position:relative;

border-right:2pxsolidvar(--elevatorBorderColor--);

padding:1px;

exportinterfaceElevatorProps{

leftDoorStyle:StylePr