第
利用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