看到的文章链接如下https://mp.weixin.qq.com/s/8G...
/** 1. 信号灯控制器用 React 实现一个信号灯（交通灯）控制器，要求：1. 默认状况下， 1.1. 红灯亮20秒，并且最初5秒闪动 1.2. 绿灯亮20秒，并且最初5秒闪动 1.3. 黄灯亮10秒 1.4. 秩序为 红-绿-黄-红-绿-黄2. 灯的个数、色彩、持续时间、闪动工夫、灯光秩序都可配置，如： lights=[{color: '#fff', duration: 10000, twinkleDuration: 5000}, ... ]*/import React from 'react'import ReactDOM from 'react-dom'class TrafficLightItem extends React.Component {}工夫还是挺紧的 有些写的比拟粗率
twinkle成果没写 间接用css实现就好了 在twinkleState为true时 加闪动的款式 不小心写了个小Bug 坑了波本人 一共花了差不多1个小时写进去如下所有代码
编辑红绿灯配置以及批改程序没写 临时只反对了通过input输出配置
能够轻易找个网站如https://codesandbox.io/s/93m5... 复制代码 查看成果
import React, { useState } from "react";import ReactDOM from "react-dom";class Control extends React.Component { constructor(props) { super(props); this.color = React.createRef(); this.duration = React.createRef(); this.twinkleDuration = React.createRef(); } state = { lightList: [], showTip: false }; handleLighgData = () => { let [c, d, twinkle] = this.getRefValue(); let isEmptyValue = this.isEmptyValue; if (isEmptyValue(c) || isEmptyValue(d) || isEmptyValue(twinkle)) { this.setState({ showTip: true }) return false; } let lightList = this.state.lightList; lightList.push({ color: c, duration: d, twinkle: twinkle }); this.setState({ lightList, showTip: false }); }; isEmptyValue = (value) => { return ( value === "" || value === null || value === false || value === void 0 ); }; getRefValue = () => { return [ this.color.current.value, this.duration.current.value, this.twinkleDuration.current.value ]; }; editLight = (index) => { //待实现 }; render() { const { lightList, showTip } = this.state; return ( <> <div> Color: <input ref={this.color} /> </div> <div> Duration: <input ref={this.duration} /> </div> <div> twinkleDuration: <input ref={this.twinkleDuration} /> </div> <input type="submit" onClick={this.handleLighgData} /> {showTip ? <span>每个参数都是必填的</span> : ""} {lightList.length > 0 && lightList.map((item, index) => { return ( <div key={item.color + index}> {item.color},{item.duration},{item.twinkleDuration} <span onClick={this.editLight.bind(this, index)}>Edit</span> </div> ); })} <TrafficLightItem lightList={lightList} /> </> ); }}class TrafficLightItem extends React.Component { state = { curLight: {}, curLightList: [], showLight: true, twinkleState: false }; startLight = () => { let { lightList } = this.props; if (lightList.length === 0) return false; if (this.state.curLightList.length > 0) return false; this.setState({ curLightList: lightList }, () => { this.handleLightTime(); }); }; handleLightTime = () => { let { curLight, curLightList } = this.state; if (curLightList.length === 0) return false; let state = null; if (curLight.color !== void 0) { state = curLight; } else { state = curLightList[0]; curLightList.shift(); this.setState({ curLightList }); } this.setState({ curLight: state }); if (state.duration !== 0) { setTimeout(() => { this.setState( { curLight: Object.assign(state, { duration: 0 }) }, () => { this.handleLightTime(); } ); }, state.duration); } else if (state.twinkleDuration !== 0) { this.setState({ twinkleState: true }); setTimeout(() => { this.setState({ curLight: {}, twinkleState: false }, () => { this.handleLightTime(); }); }, state.twinkleDuration); } }; render() { let { curLight, twinkleState } = this.state; return ( <> <hr /> <input type="button" value="start" onClick={this.startLight} /> <div style={{ width: 10, height: 10, borderRadius: "50%", border: "solod 1px #000", background: curLight.color }} > </div> </> ); }}const rootElement = document.getElementById("root");ReactDOM.render(<Control />, rootElement);