关于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);