关于react.js:阿里笔试红绿灯-看到一篇文章后的随手记录

看到的文章链接如下 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);